制作全宽度和引导

我想问三个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

制作全宽度和引导

回答

相关问题