为什么在使用 col-md-4 时我的一个 div 容器被推到第二行答案

【问题标题】：Why is one of my div containers got pushed to the second row when using col-md-4为什么在使用 col-md-4 时我的一个 div 容器被推到第二行
【发布时间】：2015-11-23 14:21:57
【问题描述】：

我希望三个 div 容器并排排列，最大宽度为 1044px。我尝试使用 col-md-4，因为我有 margin:20px，它将第三个 div 容器推到第二行。我在网上阅读，有人建议使用 div class="row"，我试过了，最终结果是一样的。这是我的 HTML：

 <div class="engineering-section col-xs-12">
          <div class="engineering-section-title title-text text-center">Engineering</div>
          <div class="row">
            <div class="card-container">
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-1.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-2.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-3.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>`enter code here`
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
          </div><!--end row-->
          </div><!--end card-container-->

【问题讨论】：

你也有自定义的 CSS。如果是，那就发帖吧
@Sijie Wang 为什么要申请保证金？保持下面的列从顶部或增加列之间的空间
如何增加列之间的间距？
@AnkitAgarwal 代码在这里jsfiddle.net/Swathi56/tya11gux 不确定这是否有助于因为图像等未显示。
@SijieWang 你想增加列之间的空间还是想增加顶部和 3 列之间的空间？

标签： html css twitter-bootstrap

【解决方案1】：

从 card-section 类中移除 margin 的自定义样式。它会工作

【讨论】：

删除边距会使 3 div 紧紧地相互挤压，这不是我想要实现的。我喜欢给他们一些喘息的空间。
这不会发生，因为 col-md-4 在兄弟元素之间应用了边距。你真的在小提琴上观察到了吗
好吧，我尝试在我的代码中删除 margin:20px ，结果这 3 个框之间没有空格。

【解决方案2】：

你必须遵守这 3 条规则：

行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充。
使用行来创建水平的列组。
内容应放在列中，并且只有列可以是行的直接子级。

应该是这样的：

<div class="container-fluid"><!--<div class="container">-->
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

有关 Bootstrap 响应式设计的更多信息，请参阅此链接： http://getbootstrap.com/css/

【讨论】：

【解决方案3】：

你在这里做错了

<div class="card-section col-md-4">

将card-section 放入col-md-4

<div class="col-md-4">
    <div class="card-section">

它可以为您提供 3 列之间的空间，您也可以设置内容样式

并删除 margin: 20px; 现在没有必要了。

Fiddle example

【讨论】：

太棒了！那解决了它！谢谢！