引導程序和嵌套行

我使用引導程序來製作我的網頁樣式。引導程序和嵌套行

我想要做類似這樣的圖片的東西：

我一直在嘗試它（在剪斷可對其進行測試），但我不知道這是否是做的最好的方法。

我的意思是我不知道，如果是正確的沒有任何數據上（COL-XS-2）添加兩個div，只是添加一些空間（自舉列）的左側和對。

有沒有更好的方法來做到這一點？

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

 
    <div class="container-fluid" style="background-color:white;> 
 
    <div class="row" > 
 
     <div class="col-xs-12">WEB LOGO------------------------</div> 
 
     <div class="row"> 
 
      <div class="col-xs-2" style="background-color:white;"></div> 
 
      <div class="col-xs-8" style="background-color:grey;">YES</div> 
 
      <div class="col-xs-2" style="background-color:white;"></div> 
 
     </div> 
 
     <span> more content here -------------</span> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2015-12-02 Jordi 45454

相反，空div的，你可以使用offset：

<div class="col-xs-8 col-xs-offset-2" style="background-color:grey;">YES</div>

這將2列移動你的元素的權利。

來源

2015-12-02 20:13:47 Turnip

你需要實現style="inline-block"裏面你想要孩子內聯的父div。

來源

2015-12-02 20:13:48 Beengie

引導程序和嵌套行

回答

相關問題