Question

我在一行中有两个Jumbotrons，但无法弄清楚如何将行放在页面中心。我假设它是一些我缺少的简单CSS。对我有什么建议吗？

HTML：

<div class="container">
    <div class="row">
      <div class="well-lg">
  <div class="one">
    <div class="col-xs-6">
    <div class="jumbotron text-center">
        <a href="#" class="btn btn-xs ban-default">Button</a>
</div>
</div>
</div>
<div class="two">
  <div class="col-xs-6">
  <div class="jumbotron text-center">
      <a href="#" class="btn btn-xs ban-default">Button</a>
    </div>
</div>
</div>
</div>
</div>
</div>

我目前的CSS不应该搞乱它，但无论如何我都会发布它。

.one .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}

.two .jumbotron
{ background: url("IMG") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    min-width: 220px;
    max-width:240px;
    height:290px;
}

Answer 1

这是两个jumbotrons的简单例子：

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-xs-6">
                <h1>Bootstrap Tutorial</h1>
                <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
            </div>
            <div class="col-xs-6">
                <h1>Bootstrap Tutorial</h1>
                <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
            </div>
        </div>
    </div>
</div>

Answer 2

解决方案1 ：如果我理解您要在此处正确实现的目标，则需要完全删除max-width课程中的.jumbotron值，在100%。

为了调整jumbotron的大小，您可以调整班级padding和.one中的.two以获得居中的jumbotron。

但是，建议您这样做也要切换课程的位置。将HTML中的.one和.two类div放在列中，以避免不必要的列填充。

解决方案2 ：如果您希望将最大宽度设置保留在.jumbotron，则可以调整.one和.two类的边距。只需使用margin: 0 auto;，就可以将任何内容置于其中。

在这种情况下，您还应该按照我在第一个解决方案中所说的那样切换您的自定义类。

我希望这有帮助！

Answer 3

设置容器类的样式：将此代码添加到您的css文件中。

.container{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  }

检查小提琴：http://codepen.io/anon/pen/EPeLjV

如何在Bootstrap中将两个Jumbotrons放在一排？

3 个答案: