CSS 引导行宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33233611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap row width
提问by Adrian Devder
I have the following HTML:
我有以下 HTML：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
For some reason the entire web page is wider than the browser window. When I remove the rowclass everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.
出于某种原因，整个网页比浏览器窗口宽。当我删除row课程时，一切都会恢复正常。本地 CSS 文件与此问题无关。我的猜测是引导 CSS 以某种方式修改了行，使其因某种原因变得更宽。所以我想问一下是否有人有任何想法可以解决这个问题。
回答by Vinay Prajapati
You may either use .container class or .container-fluid. .container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can. See your html script modified below:
您可以使用 .container 类或 .container-fluid。.container 与实际屏幕保持一些边距，不要拉伸页面视图。另一方面， .container-fluid 会尽可能地拉伸页面。请参阅下面修改的 html 脚本：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.
此外，您必须使用 .col-md-6 之类的类来指定行内部分的宽度，其中 md 也可以由 lg 和 sm 替换。
mdstands for Medium sized deviceslike laptop,desktop etc.
md代表中型设备，如笔记本电脑、台式机等。
lgstands for Large sized Deviceslike projector or some bigger screens etc.
lg代表大型设备，如投影仪或一些更大的屏幕等。
smstands for Small sized deviceslike mobiles etc.
sm代表小型设备，如手机等。
You are free to use a combination of these three. For example,
您可以自由使用这三者的组合。例如，
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
Hope it helps you get started and resolve your problem.
希望它可以帮助您入门并解决您的问题。
回答by WisdmLabs
To fix this issue you have use class rowproperly.
要解决此问题，您必须row正确使用类。
You have not wrapped class rowwith class container.
你还没有用 class 包装rowclass container。
Bootstrap provides grid system.
Bootstrap 提供了网格系统。
Bootstrap's grid system allows up to 12 columns across the page. You need to arrange your page width into that 12 columns.
Bootstrap 的网格系统允许页面上最多有 12 列。您需要将页面宽度安排为 12 列。
It is not possible to explain all of here. Please refer following links.
不可能在这里解释所有。请参考以下链接。
回答by Daniel Tung
You must use containers to use any of the bootstrap functionality. This can be a set width container or a fluid container but adding one will fix your issues. I also switch around your style to use a working CDN version and moved Javascript to the recommended location. You might find this a better starting point.
您必须使用容器才能使用任何引导功能。这可以是固定宽度的容器或流体容器，但添加一个可以解决您的问题。我还切换了您的风格以使用有效的 CDN 版本并将 Javascript 移动到推荐的位置。您可能会发现这是一个更好的起点。
Reference: http://getbootstrap.com/css/#overview-containerand http://getbootstrap.com/css/#grid
参考：http: //getbootstrap.com/css/#overview-container和http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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">
</head>
<body>
<div class="container-fluid">
<header class="row">Test 1</header>
<section class="row section1">Test 2</section>
<section class="row section2">Test 3</section>
<section class="row section1">Test 4</section>
<section class="row section2">Test 5</section>
<section class="row section1">Test 6</section>
<footer class="row">Test 7</footer>
</div>
<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>
</body>
</html>
回答by Aritro Sen
Please wrap it in bootstrap .container class and then check if the problem still persists.
请将其包装在 bootstrap .container 类中，然后检查问题是否仍然存在。
<body>
<div class="container">
//your content goes here
</div>
</body>
回答by Sjoerd Valk
Maybe you have to add the grid of the bootstrap css?
也许你必须添加引导 css 的网格？
Look to this example
看看这个例子
回答by sreeya chowdary
If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.
如果您使用的是引导程序 4，只需将 m-0 类添加到您的行中，而不是将其包装在其他 div 中。它会删除边距。
