Question

我正在尝试让我的容器div背景颜色扩展到浏览器的整个宽度。现在我无法绕过默认情况下在引导程序中设置的容器样式，尽管我将自己的类添加到容器中。唯一有效的样式是background-color。我也尝试过以下CSS，但它没有做任何改动。

margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #FDDC00;

这是我的HTML：

<div class="container selection-section">
        <div class="row pattern-choice">
            <div class="col-md-12">
                <h2><i>Choose a pattern</i></h2>
                <ul>
                    <li class="button-border">
                        <h3 class="button-choice" ><a href="/solid/color" class="button-link" id="solid-choice">SOLID</a></h3>
                    </li>
                    <li class="button-border">
                        <h3 class="button-choice" id="stripe-choice"><a href="/stripe/color" class="button-link" id="stripe-choice">STRIPE</a></h3>
                    </li>
                    <li class="button-border">
                        <h3 class="button-choice" id="plaid-choice"><a href="/plaid/color" class="button-link" id="plaid-choice">PLAID</a></h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>

这是我的CSS：

.selection-section {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #FDDC00;
}

Answer 1

如果您希望容器扩展到网页的全宽，请使用container-fluid代替container。

Answer 2

如果只有container与另一个div相关的颜色可能对您有效。

.selection-section {
  background: #FDDC00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="selection-section">
  <div class="container">
    <div class="row pattern-choice">
      <div class="col-md-12">
        <h2><i>Choose a pattern</i></h2>

        <ul>
          <li class="button-border">
            <h3 class="button-choice"><a href="/solid/color" class="button-link" id="solid-choice">SOLID</a></h3>

          </li>
          <li class="button-border">
            <h3 class="button-choice" id="stripe-choice"><a href="/stripe/color" class="button-link" id="stripe-choice">STRIPE</a></h3>

          </li>
          <li class="button-border">
            <h3 class="button-choice" id="plaid-choice"><a href="/plaid/color" class="button-link" id="plaid-choice">PLAID</a></h3>

          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="well">Outside Div</div>
</div>

覆盖Bootstrap容器全宽背景颜色

2 个答案: