Question

这是否需要CSS＆＃39; hack＆＃39;或者我的标记错误开始了吗？（或者，这是默认的Twitter引导程序设计）？

Answer 1

将jumbotron放入div行：

<div class="row">
   <div class="jumbotron">
     .....
     .....
   </div>
</div>

或者使用css来增加宽度并调整位置，如：

<div class="jumbotron" style="width:102%; margin-left:-1%">
  ....
  ....
</div>

（不推荐）

Answer 2

这是默认的Jumbotron的样子。我不确定你为什么不检查Bootstrap documentation以查看他们的基本示例？

编辑：您的Jumbotron宽度不同的原因是因为您的表格包含在.row类中，其中包含margin-left: -15px＆amp; margin-right: -15px适用于此。

要解决您的问题，请将.jumbotron包裹在<div class="row"></div>

中

您应始终将元素放在列中。例如.row > .col-sm-12 > .jumbotron

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
 <div class="container">
  <h1>Hello, world!</h1>
  <p>This is a lead</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
 </div>
</div>

为什么我的jumbotron宽度与我在下方面板中的响应表的宽度不同？

2 个答案: