React和Bootstrap列不能一起工作 [英] React and Bootstrap columns are not working together

问题描述

我所拥有的是：

 < div class =container-fluid> 
< div class =row> 
< div class =col-md-8 col-xs-12> 
< div class =row> 
< div class =btn heading_button col-xs-12data-toggle =collapsehref =＃collapseTwo> 
< h4>标题< / h4> 
< / div> 
< / div> 
< div class =row> 
< div id =collapseTwo> 
< span> 
 Content 
< / span> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

这是一个扩展头文件，如下所示：

到目前为止，我的React版本看起来像

 的类合并到这个组件$ b $ （
< div className =container-fluid> 
< div className =row> 
< div className =col-md-8 col- xs-12> 
< div className =row> 
< div className =btn heading_button col-xs-12data-toggle =collapsehref =＃collapseTwo > 
< h4>标头< / h4> 
 < / DIV> 
< / div> 
< div class =row> 
< div id =collapseTwo> 
< span>内容< / span> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
）; 
} 
}）; 
 
 React.renderComponent（< Campaign_Setup /> ;, document.getElementById（'Campaign_Settings'））; 
  

但事实证明

标题应占据整个宽度，但React版本正在挤压它，以及用CSS创建的箭头图标：

  .heading_button：before {
 / *开放面板的符号* / 
 font-family：'Glyphicons Halflings'; / *对于启用图形必不可少* / 
内容：\e114; / *根据需要进行调整，取自bootstrap.css * / 
 float：right; / *根据需要调整* / 
颜色：＃999999; / *根据需要进行调整* / 
 margin-top：10px; 
} 
  

不会呈现。这有什么问题？
值得注意的是，在检查员看时。该容器和行填充宽度，但按钮/标题不。

解决方案

您忘记将一个 转换为 className 用于内容。

您的控制台应该有警告。

I am just jumping into React, as my first project I wanted to convert a Bootstrap project into React and Bootstrap.

What I had was:

       <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <div class="row">
                        <div class="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
                            <h4> Header </h4>
                        </div>
                    </div>
                    <div class="row">
                        <div id="collapseTwo">
                            <span>
                                Content
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

It was an expanding header that look like this:

My React version so far looks like

var Campaign_Setup = React.createClass({
      render: function() {
        // transferPropsTo() is smart enough to merge classes provided
        // to this component.
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-8 col-xs-12">
                        <div className="row">
                            <div className="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
                                <h4> Header</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div id="collapseTwo">
                                <span> Content </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
      }
    });

React.renderComponent(<Campaign_Setup />, document.getElementById('Campaign_Settings'));

But it turns out

The header is supposed to take up the whole width, but the React version is squeezing it, and the arrow icon, created in CSS with:

.heading_button:before {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: #999999;         /* adjust as needed */
    margin-top: 10px;
}

doesn't render. What is wrong with this? It's worth noting that when looking in the inspector. The container, and rows fill the width, but the button/header does not.

解决方案

You forgot to convert one class into className for Content.

There should be a warning in your console.

这篇关于React和Bootstrap列不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！