引导网格：出乎意料的结果与div的布局

我有以下代码：引导网格：出乎意料的结果与div的布局

<div class="row"> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
</div>

我期望的3个div的1行和第二行与2周的div。

结果是： enter image description here

什么会导致这样的事情发生？

来源

2015-02-05 Ben Diamant

试图使用在自举这样定义的另一个类：

<div class="row"> 
    <div class="col-xs-12 col-sm-12"> 
     <div class="box"> 
      <div class="box-content"> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
      </div> 
     </div> 
    </div> 
</div>

这应该帮助您<div>标签的格式位置。在你使用这些类之前，重要的是确定你需要多少个col-sm-*。
您也可以在<div>中使用class="col-sm-offset-4"以“跳过”某些定义的列，并在浏览器中更正确地调整第二行。

希望它可以帮助你。

来源

2015-02-05 17:48:06 bcesars

嘿，那里，谢谢你的回答。一切都是col-sm- *数量未知的事实的很大一部分，可以是3或15。你认为你的解决方案仍然适合？ – 2015-02-07 08:32:11

如何使用默认方式排结构：

<div class="row"> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
</div> 
<div class="row"> 
    <div class="col-sm-6">*some content*</div> 
    <div class="col-sm-6">*some content*</div> 
</div>

在standard bootstrap grid你也要设置一个外部container包裹的一切行动，检查出的文档！

来源

2015-02-05 21:31:54 maioman

是的，但问题是我不知道有多少col-sm- *我有 – 2015-02-07 08:35:58

看flexbox，它可能更适合你必须做的 – maioman 2015-02-07 22:01:22

引导网格：出乎意料的结果与div的布局

回答

相关问题