製作全寬度和引導

我想問三個div的高度水平是我需要在我的網站三個分區，它堅持到全屏如下， Image 製作全寬度和引導

但會發生什麼現在是隻是保持在中心位置。我想使它成爲全寬，以下是我的Bootstrap HTML代碼。

<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.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="test.css"> 
 

 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    <div class="col-sm-4" style="background-color:yellow;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
\t <div class="col-sm-4" style="background-color:green;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body>

我需要它上面的，但任何其他替代解決方案也將被接受。 :)

來源

2016-04-02 Kaw123

看到全部網頁摘要

.row, .col-sm-4, .container { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
width: 100%!important; 
 
} 
 

 
body, html { 
 
height: 100%; 
 
}

<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.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="test.css"> 
 

 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    <div class="col-sm-4" style="background-color:yellow;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
\t <div class="col-sm-4" style="background-color:green;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body>

來源

2016-04-02 09:51:17 Pedram

非常感謝，完美的工作:) – Kaw123

請試試這個：

刪除您的div容器，並給這個類名的第一行

row-fluid

這樣的：

<div class="row-fluid"> 
    <div class="col-sm-4" style="background-color:yellow;"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    <div class="col-sm-4" style="background-color:pink;"> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
    </div> 
    <div class="col-sm-4" style="background-color:green;"> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
    </div> 
    </div>

來源

2016-04-02 09:25:30 satya

感謝您的回覆，它的工作。我怎樣才能讓每一列的全屏尺寸（高度）？這取決於文字的大小 – Kaw123

在引導3，你應該使用.container-fluid。

.row-fluid是一個引導2的東西。

來源

2016-04-02 09:56:44 Stuart

製作全寬度和引導

回答

相關問題