Bootstrap 行宽

Question

我有以下 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>

出于某种原因，整个网页比浏览器宽 window。当我删除 row class 时，一切恢复正常。本地 CSS 文件与该问题无关。我的猜测是 bootstrap CSS 以某种方式修改了该行，使其由于某种原因变得更宽。所以我想问问有没有人有办法解决这个问题。

Answer 1

也许你必须添加 bootstrap css 的网格？

看这个例子

http://getbootstrap.com/examples/grid/

Answer 2

要解决此问题，您必须正确使用 class row。

你没有用classcontainer包裹classrow。

Bootstrap 提供 grid system.

Bootstrap 的网格系统允许整个页面最多 12 列。您需要将您的页面宽度安排到这 12 列中。

这里不可能全部解释清楚。请参考以下链接。

Bootstrap grid template

Bootstrap grids

Answer 3

您必须使用容器才能使用任何 bootstrap 功能。这可以是固定宽度的容器或流体容器，但添加一个将解决您的问题。我还改变了你的风格以使用工作的 CDN 版本并将 Javascript 移动到推荐的位置。您可能会发现这是一个更好的起点。

参考：http://getbootstrap.com/css/#overview-container and 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>

Answer 4

请将其包裹在bootstrap.container class中，然后检查问题是否仍然存在。

<body>
<div class="container">
  //your content goes here
</div>
</body>

Answer 5

您可以使用 .container class 或 .container-fluid。 .container 与实际屏幕保持一定的边距 space，并且不会拉伸页面视图。另一方面，.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>

此外，您必须像 class 一样使用 .col-md-6 来指定行内部分的宽度，其中 md 也可由 lg 和 sm 替换。

md 代表 中型设备，如笔记本电脑、台式机等

lg 代表 大型设备 如投影仪或一些更大的屏幕等

sm 代表小型设备，例如手机等

您可以自由组合使用这三者。例如，

<div class="container-fluid">
    <div class="row">
       <div class="col-md-6 col-sm-1 col-lg-12">

       </div>
    </div>
</div>

希望它能帮助您入门并解决您的问题。

Answer 6

如果您使用的是 bootstrap 4，只需将 m-0 class 添加到您的行中，而不是将其包装在其他行中 div.It 删除边距。

Answer 7

删除边距是解决问题最简单快捷的方法。您可以通过添加 m-0 class 以及 row:

<div class="row m-0">
  ... 
</div>

Bootstrap 行宽

Bootstrap row width

css

row

width

twitter-bootstrap