Bootstrap自定义内容

Question

我试图让bootstrap中的自定义内容看起来像这样

但是，持有黑色背景的div会溢出父div。

以下是代码：

<div class="thumbnail shadow">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:black">
                        <h3 style="color: white">Purchase Order</h3>
                    </div>
                </div>
                <div class="caption">
                    <h3>3</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">View</a></p>
                </div>
            </div>

请参阅http://www.bootply.com/OO8elZZx5j

-Alan -

Answer 1

溢出是因为您在.row类中的列上有背景。 （.row默认情况下会给出负边距，而col-xx-xx会给出等效填充。

通过在行上覆盖边距来删除边距：

.shadow > .row {
  margin-right: 0;
  margin-left: 0;
}

或（最好），给目标元素一个左边距和更小的宽度：

<div class="col-sm-12 col-md-12 col-lg-12" style="background-color:black; margin-left: 15px; width: 90%;">
  <h3 style="color: white">Purchase Order</h3>
</div>

我创造了一个展示这个here的新小提琴。

但是，在这种情况下，您确实不需要在列中行。您应该做的只是在外部列中使用常规DIV来处理标题（使用背景），以及另一个div来处理正文。处理此问题的最佳方法是：

<div class="col-sm-3 col-md-3 col-lg-3">
  <div class="thumbnail shadow">
    <div class="header">
      <h3 style="color: white">Purchase Order</h3>
    </div>
    <div class="caption">
      <h3>3</h3>
      <p>...</p>
      <p><a href="#" class="btn btn-primary" role="button">View</a></p>
    </div>
  </div>
</div>

这将自动处理宽度。然后，您可以设置.header样式以包含背景，并自动处理边距，如果您想要更多地删除标题＆＃39;：

.header {
  background-color: #000;
  padding: 5px;
  //margin-left: -5px;
  //margin-right: -5px;
}

我创建了一个新的小提琴，展示了这个here。

希望这有帮助！ ：）