Bootstrap 是否像简单的网格一样对齐两个内容？答案

【问题标题】：Does Bootstrap align two content like simple grid?Bootstrap 是否像简单的网格一样对齐两个内容？
【发布时间】：2017-06-18 22:07:30
【问题描述】：

我已经为此工作了大约一周。我使用引导程序在两列中对齐了两个类，并在内容下方创建了另一个单独的类。当我预览网页时，单独的类与两个类对齐，而不是单独的类位于 2 列网格下方。如何将单独的类放在两列引导网格下？下面是结果的图像，以及使用的代码。谢谢

   <div class="prod_section">
   <div class="border col-md-6">
      <img src="help.jpg" class="word" alt="h">
      <h2 class="header">SHIRT</h2>
   </div>
   <div class="border col-md-6 ">
      <img src="img/help_two.jpg" alt="" class="word">
      <h2 class="header"> URBAN SHIRT</h2>
   </div>
</div>
<div class="seperate">Is BOOTSTRAP suppose to appear like this?</div>



.prod_section{
    margin:auto;
    width:1300px;
    margin-top:600px;
    margin-bottom: 600px;
}

.word{
    max-width:90%;
    /*box-shadow: 10px 10px 20px #bababa;*/
}

h2{
    font-family: 'Montserrat';
    font-weight:700;
}
.header{
    padding-top:20px;
}
body{
    background:white;
}

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

尝试将那些col-md-6 放入.row div 中，例如：

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>

【讨论】：

【解决方案2】：

在引导程序中，您需要像这样启动 div

<div class="container">
  <div class="row">
    <div class="col-md-6" id="one"><img src="http://lorempixel.com/400/200" class="word" alt="h">PIC A</div>
    <div class="col-md-6" id="two"><img src="http://lorempixel.com/400/200" alt="" class="word">Pic B</div>
  </div>

  <div class="row">
    <div class=" col-md-6 seperate"><img src="http://lorempixel.com/400/200">Is BOOTSTRAP suppose to appear like this? Div 3</div>
  </div>
</div>

要充分利用引导网格系统，您需要将所有内容包装在 <div class="container"> 中，然后 <div class="row"> 行负责确保其中的所有内容都在同一“行”中对齐，只要网格不对齐超过 12 列。最后，您需要给每个 div 一个大小，它们将占用多少列。 1 - 12 列。这里我们有 3 个 div，每个 <div class="column-md-6"> 占据 6 列。前两个 <div>s 在自己的行内，总共占用 12 列，而对于最后一个 <div>，我们在行外，但仍在 <div class="container"> div 内并创建一个新行，@987654329 @。然后它只是创建你的 div 并给它们列宽的问题。这不是对 bootstrap 的完整概述，而是对网格系统如何工作的简单概述。继续从网站上阅读更多关于 bootstrap 的内容，bootstrap 4 尚未发布，但 alpha 版本可以安全使用，我个人到目前为止还没有遇到任何问题。
https://v4-alpha.getbootstrap.com/layout/grid/

【讨论】：