Question

我是Bootstrap的新手。我刚刚使用layoutit.com创建了一个示例Web应用程序。当我在网站上进行预览时，列正确对齐。我使用md-2和md-10，从而将屏幕划分为2个布局，分别为2和10.第一列有2个网格，从屏幕的最左边开始。请参阅image-1 Please refer the image-1

当我下载文件并将其作为HTML文件打开时，第一列有2个网格，左侧有更多空间。即使对于具有10个网格的第二列，其右侧也有更多空间。请参考图像-2。 enter image description here

**

＆＃13;

<!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>

＆＃13;

修改

附上代码以供参考：

请帮我解释为什么我会在列的左侧和右侧获得空白区域。如何避免这种情况并广泛使用该页面。

Answer 1

由于您没有提供代码，因此很难理解代码中的问题。但通常问题是使用容器类。因此，不要使用容器类使用 jumbtron 类或容器流体类，因为它们占用了网页的全宽。有关更多说明，请提供代码。像这样 -

<div class = "jumbotron">
...
</div>

或

<div class = "container-fluid">
...
</div>

Answer 2

我认为您使用的是课程container，它为您的网页提供了最大宽度...如果您不想要并想要全宽，则可以使用container-fluid。 ..

替换

<div class="container"></div>

通过

<div class="container-fluid"></div>

以下是doc about container

屏幕上的Bootstrap网格

2 个答案: