Bootstrap 布局造成奇怪的填充和对齐

Question

我正在制作我的第一个 Bootstrap 布局，到目前为止我很享受它，尽管我运行遇到了一些问题，它似乎会产生意外的填充和对齐问题。

我想将其水平布局为导航栏、搜索栏、内容、页脚。它们应该都是页面的全宽，但所有内容都保持在中间并对齐。出于某种原因，我的 Nav Bar/Footer 两边都有奇怪的空格，内容对齐方式往往参差不齐。

任何人都可以帮我找出导致这些问题的原因吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <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.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

    <!-- Navigation Bar -->
    <!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <nav class="navbar navbar-inverse">
        <div class="container">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Website</a>
            </div>

            <!-- Right Contents -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
            </ul>

        </div>
    </nav>

    <!-- Search Bar -->
    <div class="row search-bar">
        <div class="container">

            <!-- Search Text Box -->
            <div class="col-lg-5">
                <input class="form-control" id="search" type="text" value="Search stuff...">
            </div>

            <!-- Search Category -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Location -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Button -->
            <div class="col-lg-1">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </div>

        </div>
    </div>

    <div class="container">

        <div class="row">

            <div class="content col-lg-12">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>

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

    <!-- Site footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; Company 2016</p>
        </div>
    </footer>

</div>

</body>
</html>

Answer 1

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

Bootstrap

Answer 2

您的填充和对齐问题已解决，因为 bootstrap 结构不当。在此处查看代码 CODEPEN

<div class="container-fluid">

    <!-- Navigation Bar -->
    <!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <nav class="navbar navbar-inverse">
        <div class="container">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Website</a>
            </div>

            <!-- Right Contents -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
            </ul>

        </div>
    </nav>

    <!-- Search Bar -->
    <div class="container ">
        <div class="row search-bar" style="margin-bottom:10px;">

            <!-- Search Text Box -->
            <div class="col-lg-5">
                <input class="form-control" id="search" type="text" value="Search stuff...">
            </div>

            <!-- Search Category -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Location -->
            <div class="col-lg-3">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Test 1</a></li>
                        <li><a href="#">Test 2</a></li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </div>
            </div>

            <!-- Search Button -->
            <div class="col-lg-1">
                <button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </div>

        </div>
    </div>

    <div class="container">

        <div class="row">

            <div class="content col-lg-12">

                <div>

                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                        <div class="col-sm-3">
                            <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                        </div>
                    </div>

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

    <!-- Site footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; Company 2016</p>
        </div>
    </footer>

</div>

Answer 3

您的 HTML 结构不正确。始终的经验法则是您的所有列都必须在容器内的一行和行内。你可以想象成

container > row > columns

我还在最后一个按钮上添加了一个 btn-block，这样它就会散开一点。另一件需要注意的事情是您在 HTML 中使用了多个容器。一般来说，经验法则是在您的页面中使用一个容器。但是，在您的情况下，由于您有一个遍布整个页面的菜单并且正文居中，因此您将需要 2 个容器。一般样板文件如下：

container
  row // each row is 12 columns. so add the combination
    col 4
    col 8 
  row 
    col 3
    col 3 // you can further divide each columns into a row
      row // again divided into 12 columns
        col 6
        col 6
    col 3
    col 3

容器： 包装所有内容并将其内容居中

容器流体：包裹一切但让它流动

行：定义列的容器。 Bootstrap 使用 12 列网格

列：每列

Bootstrap 网站对网格的工作原理有很好的 example。

<!DOCTYPE html>
<html lang="en">
<head>
<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.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
    <div class="container">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">Website</a>
        </div>

        <!-- Right Contents -->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
        </ul>

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

<!-- Search Bar -->
<div class="container">

<div class="row search-bar" style="margin-bottom: 10px;">
        <!-- Search Text Box -->
        <div class="col-lg-5">
            <input class="form-control" id="search" type="text" value="Search stuff...">
        </div>

        <!-- Search Category -->
        <div class="col-lg-3">
            <div class="dropdown">
                <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
            </div>
        </div>

        <!-- Search Location -->
        <div class="col-lg-3">
            <div class="dropdown">
                <button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                </ul>
            </div>
        </div>

        <!-- Search Button -->
        <div class="col-lg-1">
            <button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
        </div>

    </div>


    <div class="row">

        <div class="content col-lg-12">


                <div class="row">
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                    <div class="col-sm-3">
                        <div style="height:125px;width:100%;border:1px black solid;">Category</div>
                    </div>
                </div>

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

<!-- Site footer -->
<footer class="footer">
    <div class="container">
        <p>&copy; Company 2016</p>
    </div>
</footer>


</body>
</html>

Answer 4

CSS

.no-margin{
    margin: 0px;
    }
    .no-padding
    {
      padding: 0px;
    }

HTML

 <div class="panel-group" no-margin no-padding>
            <div class="panel-primary" style="box-shadow:0px 20px 20px 0px">
                <div class="panel-body">

任何地方 DIV CLASS

<nav class="navbar navbar-background navbar-info no-margin no-padding" >
    <div class="navbar-header ">
    <ul class="nav navbar-nav">

Answer 5

已经有针对该常见问题的 Bootstrap 调整 class，因为一直... 排水沟或无排水沟

.no-gutters {
margin-right: 0;
margin-left: 0;

}

Bootstrap 布局造成奇怪的填充和对齐

Bootstrap Layout creates weird padding and alignment

html

css

margin

padding

twitter-bootstrap