Question

我是一个新手来引导并享受它的网格系统。

但有些东西有点没有发生。以下是代码：

<div class='container-fluid'>
 <div class='row'>
  <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
  <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
        <div class='row'>
            <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
        </div>

        <div class='row'>
            <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>
        </div>
    </div>  
</div>

我期待着1-col＆amp; 11-coll文本（朝向代码末尾）应该相互出现。但不知怎的，没有发生什么。我在这里缺少什么？

提前致谢。

Answer 1

<div class='container-fluid'>
 <div class='row'>
  <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
  <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
        <div class='row'>
            <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
        </div>

        <div class='row'>
            <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>
        </div>
    </div>  
</div>
</div>
</div>


You were miss two div which is not closed. Please put these code. It works!

Answer 2

 <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>

XS代表超小型，通常用于手机。可能因为这个原因你的线路很容易断线。尝试将其更改为中等“md”而不是“xs”

你没有关闭第一行！

Answer 3

试试这个：

    <div class='container-fluid'>
    <div class='row'>
    <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
    <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
    <div class='row'>
    <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
    </div>
   <div class='row'>
   <div class='col-md-1'>1-col</div><div class='col-md-2'>11-col</div>
    </div>
   </div>  
   </div>

同时确保您的屏幕宽度≥992px＆amp; ＆lt; 1200px for col-md。

这里的问题是包含col-1＆amp;的行。 col-11在里面

<div class='col-md-3' id='right-column' style='overflow: auto;     padding-top: 25px; padding-bottom: 25px;'>

即。 max col可以是3，超出此范围将在下一行呈现。

祝你好运＆amp;希望这有帮助。

Answer 4

或多或少的代码没问题。

它正好适用于col-xs-2＆amp; col-xs-10，类似于col-xs-3和col-xs-9以及所有其他类似的组合，直到col-xs-6＆amp; COL-XS-6。但是没有为col-xs-1和col-xs-11工作。

我使用$（selector）.css（'width'）和.... drumrolls <计算了容器行和col-xs-1 div和col-xs-11 div的宽度/ em> ......分别为342像素，30像素和313像素。（请注意，此段位于col-md-4 div内）

哎呀... 313 + 30＆gt; 342，因此不合适。

所以我在我的css中添加了这个

.col-xs-11 {width: 91.21%; }

它有效!!!! ： - ）

谢谢大家试图帮助我。

希望有一天这对某人有帮助。

引导程序中的嵌套网格系统

4 个答案: