屏幕上的引导网格
屏幕上的引导网格
提问于 2015-06-15 06:20:57
我是新来的。我刚刚用layoutit.com创建了一个示例web应用程序。当我在网站上进行预览时，列是正确对齐的。我使用了md-2和md-10，从而将屏幕划分为2和10的两个布局。第一列有2个网格，从屏幕的最左边开始。请参阅图-1
当我下载该文件并以HTML文件的形式打开它时，第一列有2个网格，左边有更多的空间。即使是有10个网格的第二列，其右侧也有更多的空间。请参考图片-2。
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3, from LayoutIt!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-2 column">
<ol>
<li>
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
</ol>
</div>
<div class="col-md-10 column">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
编辑
现附上守则，以供参考：
请帮助我，为什么我要得到空的空间在左和右的列。如何避免这种情况，并广泛使用该页面。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-15 06:25:50
由于您没有提供代码，因此很难理解代码中的问题。但是，通常出现的问题是使用容器类。因此，与其使用容器类，不如使用巨型类或类，因为它们占用了整个网页的宽度。要获得更多的澄清，请提供代码。就像这样-
<div class = "jumbotron">
...
</div>或
<div class = "container-fluid">
...
</div>Stack Overflow用户
发布于 2015-06-15 06:30:24
我想你使用的是container类，它为你的页面提供了一个最大宽度.如果你不想要和想要一个完整的宽度，你可以使用container-fluid.
替换你的
<div class="container"></div>通过
<div class="container-fluid"></div>这是关于集装箱的文件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30838487
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号