Bootstrap是否与简单网格对齐两个内容？

Question

我已经为此工作了大约一个星期。我使用bootstrap在两列中对齐了两个类，并在内容下面创建了另一个单独的类。当我预览网页时，单独的类与两个类对齐，而不是在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;
}

Answer 1

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

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

Answer 2

在bootstrap中，你需要像这样开始你的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>

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