Bootstrap：一行col-lg- *中的一行

你好，我想在col-lg-4 div（紅色）的另一行（黃色）中有一行（藍色），就像這樣的：Bootstrap：一行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>

這個CSS：

.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; 

}

但我得到這個：

儘管顏色混合起來（如果你有一個解決方案來防止這也是這將是冷靜），我不能有我要找...

結果很多感謝

來源

2017-06-01 ThisIsMe

我已經發布了的jsfiddle代碼解決方案

在你的CSS刪除類屬性規則[*類=「山坳 - 」]。建議您指定的規則來使用CSS的具體內容。您將所有列轉換爲400px的行高，這就是爲什麼您的最終html看起來像這樣。並且不使用內聯樣式

如果去掉[*類=「同事」]，並添加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

Bootstrap：一行col-lg- *中的一行

回答

相關問題