如何在没有大空间的情况下将Div放在彼此之下

Question

如何使用Bootstrap

将div放在彼此之下而没有大空间

Html代码：

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

</div>

<div class="col-md-6">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>

</div>



<div class="col-md-6">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>

</div>


<div class="col-md-6">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>

</div>


</div>

下图，将解释我面临的问题

我不需要圆圈内的那个空间，我该怎么做才能让div在彼此之下没有空间？ 谢谢

Answer 1

您可以在bootstrap中以这种方式安排div以满足您的要求。

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

</div>