ブートストラップ：行内のcol-lg- *の行

こんにちは私は別の行（黄色）のcol-lg-4 div（赤色）の行を（青色で）持っていたいと思います。これは：このCSSでブートストラップ：行内のcol-lg- *の行

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 


<div class="container-fluid" style="height: 400px;background-color: yellow"> 

    <div class="row"> 

     <div class="col-lg-4 col-lg-offset-1" style="background-color: red;"> 

      <div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;"> 
       dddd 
      </div> 

     </div> 

    </div> 

</div> 

</body> 
</html>

：

ここ

私が試したものである

.navbar { 
    margin-bottom: 0 !important; 
    background-color: white; 
} 

.row1 { 
    background: url("appart.jpg"); 
    background-size: 100% 400px; 
    background-repeat: no-repeat; 
} 


[class*="col-"], footer { 

    background-color: lightgreen; 

    opacity: 0.5; 

    line-height: 400px; 

    text-align: center; 

}

しかし、私はこれを取得：

私は私が...

探していた結果を持つことはできません（あなたはこれを防止するためのソリューションを持っている場合も、それはクールになる）色が混ざって取得することにもかかわらず、私はあなたのCSSのソリューション

でjsfiddleコードを掲載している

出典

2017-06-01 ThisIsMe

多くのおかげで、クラスの属性ルール[クラス* =「COL - 」]を削除します。CSSを使用して、特定の要素にルールをターゲットにしてください。すべての列を400pxの行の高さに変換しているので、最終的なHTMLはそのように見えます。そして、あなたは[クラス* =「col-を」]削除した場合、インラインスタイル

を使用してCSSファイルに次のように追加しないでください、あなたは望ましい結果を得るでしょう

.container-fluid > .row, .col-lg-4.col-lg-offset-1 { 
    height: 100%; 
} 

.col-lg-4.col-lg-offset-1 > .row { 
    top: 50%; 
    transform: translateY(-50%); 
    position: relative; 
    text-align: center; 
}

フィドルのデモ https://jsfiddle.net/karthick6891/4js3r3hd/

出典

2017-06-01 01:36:31 karthick

ブートストラップ：行内のcol-lg- *の行

答えて

関連する問題