Question

这是我需要输出的内容吗？我怎么能用bootstrap做到这一点？image

<div class="container">
 <div class="row">
  <div class="col-lg-8">
   -- Content here--
  </div>
  <div class="col-lg-4">
   -- content--
  </div>
</div>
</div>

如何在这两列之间添加特定的差距请帮助：）

Answer 1

如果您希望两列之间存在差距，为什么不简单地添加另一列？这样的事情。通过适当的措施减少其他一列或两列。

<div class="container">
 <div class="row">
  <div class="col-lg-7" style="background-color:white">
   -- Content here--
  </div>  
<div class="col-lg-1"  style="background-color:grey">
   -- content--
  </div>

  <div class="col-lg-4"  style="background-color:white">
   -- content--
  </div>
</div>
</div>

Answer 2

只需在第二个网格的左侧添加边距。

      <div class="container">
       <div class="row">
          <div class="col-lg-8" style="border: 1px solid black;">
    Content here
  </div>
  <div class="col-lg-3" style="border: 1px solid black; margin-left: 2%;">
   -- content--
  </div>
</div>
</div>

Answer 3

将offset添加到第二个div，如下所示，并将其设为col-lg-3

<div class="container">
 <div class="row">
  <div class="col-lg-8">
   -- Content here--
  </div>
  <div class="col-lg-3 col-lg-offset-1">
   -- content--
  </div>
</div>

如何使用bootstrap这样输出？

3 个答案: