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>

由于某种原因，整个网页比浏览器窗口宽。当我删除row课程时，一切都恢复正常。本地CSS文件与此问题无关。我的猜测是，bootstrap CSS会以某种方式修改行，使其更宽。所以我想问一下是否有人有任何想法可以解决这个问题。

Answer 1

要解决此问题，您已正确使用课程row。

您尚未使用课程row包装课程container。

Bootstrap提供grid system。

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

这里无法解释所有问题。请参考以下链接。

Bootstrap grid template

Bootstrap grids

Answer 2

您可以使用.container类或.container-fluid。 .container从实际屏幕维护一些边距空间，并且不会拉伸页面视图。另一方面，容器流体尽可能地拉伸页面。请参阅下面修改的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>

此外，您必须使用.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 3

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

看看这个例子

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

Answer 4

您必须使用容器来使用任何引导功能。这可以是设置宽度容器或流体容器，但添加一个将解决您的问题。我也会切换你的风格以使用有效的CDN版本，并将Javascript移动到推荐的位置。您可能会发现这是一个更好的起点。

参考：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>

Answer 5

请将它包装在bootstrap .container类中，然后检查问题是否仍然存在。

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

Answer 6

如果您使用的是Bootstrap 4，只需在行中添加m-0类而不是将其包装在另一个div中即可。

Bootstrap行宽

6 个答案: