Bootstrap嵌套列對齊問題

新引入Bootstrap並具有嵌套列的一些問題。出於某種原因他們是不成比例的。第一對嵌套列被「壓縮」成一半，但第二對嵌套列的比例很好。見下文。Bootstrap嵌套列對齊問題

<!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"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <h1>Hello World!</h1> 
 
    <p>Resize the browser window to see the effect.</p> 
 
    <div class="row"> 
 
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6 
 
     <div class="row"> 
 
     <div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div> 
 
     <div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div> 
 
    <div class="row"> 
 
     <div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div> 
 
     <div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div> 
 
     </div> 
 
    
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

如何固定取向，將是非常讚賞任何幫助。如果這僅僅是一個限制，那麼我想一個新的佈局將是爲了...

感謝，馬克

來源

2017-01-14 Marc Lampcov

可以接受的答案，是否能解決問題了嗎？ – ab29007

有夫婦在你的代碼錯誤。首先是你的文字顯示col-xs-6左側嵌套列，但你實際上是將它們設置col-xs-6這就是爲什麼他們只覆蓋寬度的一半。

第二個是要包括div嵌套之前關閉右DIV col-xs-4。

這裏的是你的工作代碼：

<!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"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <h1>Hello World!</h1> 
 
    <p>Resize the browser window to see the effect.</p> 
 
    <div class="row"> 
 
    <div class="col-sm-8" style="background-color:lavender;">.col-sm-8 
 
     <div class="row"> 
 
     <div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div> 
 
     <div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4 
 
    <div class="row"> 
 
     <div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div> 
 
     <div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

來源

2017-01-14 02:43:06 ab29007

Bootstrap嵌套列對齊問題

回答

相關問題