BinaryDevelop
  1. ホーム
  2. html

[解決済み] div全体を背景色で塗りつぶす方法

2022-02-11 23:22:51

質問

bootstrapで子divの中に背景色を入れてdiv全体を埋め尽くそうとしているのですが、完全に行き詰っています。右の部分を黄色にしたいのですが、divの中のテキストだけが強調されてしまいます。

以下は フィドル .

何か当たり前のことを見逃しているのは分かっているのですが、どうすれば黄色が全体的に col-lg-6 div? 

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}

.yellow {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="new" class="new-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>Section left</h1>
      </div>
      <div class="col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>

解決方法は？

を使用しているため、この現象が発生します。 .col-lg-* と .container を持つだけである。 width:1170px

そこで、次のように変更します。 .container を .container-fluid

コンテナに関する詳しい情報は ブートストラップ・ドックス 

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}
.yellow {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- New Exhibit Section -->
<section id="new" class="new-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-lg-6">
        <h1>Section left</h1>
      </div>

      <div class="col-xs-6 col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します