列内のdivの背景色のみを設定する方法

Question

列内のDIVの背景色のみを設定したいが、全列に背景が表示される。これはどうですか？ここ は私のコードである（非常に単純な）

.news { 
    background-color: #fff; 
    padding: 15px 20px; 

    .news-thumb { 
     img { 
      border-bottom: 5px solid $Brown; 
     } 
    } 
} 

とHTML：

<div class="col-lg-4"> 
    <!-- DRUGI NEWS --> 
    <div class="news"> 
     <div class="news-thumb"> 
      <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
     </div><!-- /.news-thumb --> 
     <div class="news-excerpt"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, 
       eaque! 
      </p> 
     </div><!-- /.news-excerpt --> 
    </div><!-- /.news --> 
</div><!-- /.col-lg-6 --> 

UPDATEがここ がJSFiddle である私は全幅の背景を持っていますが、私は「私の-のdivのためにしたいです'

Answer 1

これはあなた

のために役立つかもしれない別のdivにdivを使用以上1200px幅に適用され.col-lgブートストラップWorking demo here

Answer 2

を参照してくださいので、あなたは

のような小さな画面上でその効果を見ることはありませんしかし、ビューポートを1200px以上に統一したときの様子は

ので、あなたが必要とするすべての方が大きい画面でテストするか、本当に難しい はこのCSSを試してみてください...あなたが望むものを理解しています.col-md-4または.col-sm-4

Answer 3

を使用することです：

/** 
* this select every DIV that match "col" in the class 
*/ 

div[class*=col] { 
    background-color: red 
} 




.news { 
    background-color:green; 
    padding: 15px 20px; 

    .news-thumb { 
     img { 
      border-bottom: 5px solid yellow; 
     } 
    } 
} 

Answer 4

あなたが必要です大画面の場合は列のサイズが4であるため、小さい列サイズを使用する場合は、大画面の幅（ブートストラップCSSで定義される）よりも小さい画面の場合は、デフォルト値を使用します。

<div class="col-xs-4">を使用している場合は、必要に応じて機能するはずです。

https://jsfiddle.net/ufhwrg8w/3/（JS更新フィドル）

あなたは、このようなあなたのdivにdisplay: inline-block CSSを使用し、赤は "抱擁" のimgはなくフルCOL-4を埋めるようにしたい場合：

https://jsfiddle.net/ufhwrg8w/4/

Answer 5

列を入れ子にするブートストラップで遊ぶ必要があります。このような何かを助ける必要があります。

HTML：

<div class="row"> 
    <div class="col-lg-4"> 
     <div class="news row"> <!-- Add row class here --> 
      <div class="news-thumb col-xs-4"> <!-- Add new col class here --> 
       <!--<img src="http://placehold.it/300/300" alt="placeholder image" class="img-responsive" />--> 
      </div> 
      <div class="news-excerpt col-xs-8"> <!-- Add new col class here --> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, 
        eaque! 
       </p> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4"></div> <!-- Other column --> 
    <div class="col-lg-4"></div> <!-- Other column --> 
</div> 

CSS：

body { 
    background-color: #f1f1f1; 
} 
.news { 
    background-color: #fff; 
} 
.news-thumb { 
    background-color: red; 
    height: 300px; 
} 

は基本的に、あなたの.col-要素内の別の行を追加して、そこの中の列の別のセットを作成する必要があります。私は4/8になってしまったが、これらはあなたのために何にでも合うように変更することができる。

例：https://jsfiddle.net/bhxwof9h/

ブートストラップのネスト：http://getbootstrap.com/css/#grid-nesting