Question

希望在Bootstrap中连续获得两个Jumbotrons，我已经在下面的代码中成功完成了，但它们是直接并排的，所以它们会触摸。我想在它们之间找到一些分离。我尝试将col-sm-6更改为col-sm-5，但它在错误的一侧创造了一个空间。有什么解决方案吗？

<div class="container">
  <div class="row">
    <div class="well-lg">
    <div class="one">
    <div class="jumbotron col-sm-6 text-center">
      <div class="text-center">
        <p>Caption</p>
        <a href="#" class="btn btn-sm ban-default">Link & Such</a>
      </div>
    </div>
  </div>
  <div class="two">
    <div class="jumbotron col-sm-6 text-center">
        <p>Caption</p>
        <a href="#" class="btn btn-sm ban-default">Link & Such</a>
      </div>
  </div>
</div>
</div>
</div>

CSS：

.one .jumbotron
{ background-image:url('Img');
color:white;
padding-top: 0;
min-height:200px;
min-width:45%;
border-radius:0;
}

.two .jumbotron
{ background-image:url('Img');
color:white;
padding-top: 0;
min-height:200px;
min-width:45%;
border-radius:0;
}

Answer 1

我尝试将col-sm-6更改为col-sm-5，但它在错误的一侧创建了一个空间。

我希望你能像这样使用偏移量：

<div class="col-sm-6">

并为下一个div：

<div class="col-sm-5 col-sm-offset-1">

现在，空间位于col-sm-6和col-sm-5之间，空间等于1列宽。

Bootstrap中的两行Jumbotrons？

1 个答案: