引导布局创建奇怪的填充和对齐

Posted

技术标签:

【中文标题】引导布局创建奇怪的填充和对齐【英文标题】：Bootstrap Layout creates weird padding and alignment 【发布时间】：2016-12-26 03:39:39 【问题描述】：

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

我想让它水平布局为导航栏、搜索栏、内容、页脚。它们都应该是页面的全宽，但所有内容都保持在中间并对齐。出于某种原因，我的导航栏/页脚两边都有奇怪的空间，内容对齐往往是锯齿状的。

谁能帮我找出导致这些问题的原因？

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

【问题讨论】：

你使用的是什么版本的引导程序？ 您不必要地使用容器。此外，每列必须在行内。您没有正确设置所有这些。 【参考方案1】：

对于这个常见问题，已经有一个 Bootstrap 调整类，因为总是...... 排水沟或无排水沟

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

【讨论】：

【参考方案2】：

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 类中的任何地方

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

【讨论】：

【参考方案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

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

Container Fluid：包装一切，但让它流动

行： 定义列的容器。 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>

【讨论】：

这很有意义，感谢您对此的澄清。问题是仍然存在问题，导航栏和页脚没有扩展页面的整个宽度（它们的左/右有奇怪的间隙）。此外，将容器移动到“搜索栏”中的行上方会导致其宽度受到限制，我还希望它扩展页面的整个宽度。我该如何解决？ i.imgur.com/lUgpCdq.png 我已经更新了答案。基本上你不会在一页上需要多个容器。我将详细说明更新的答案。 解释得很漂亮。【参考方案4】：

由于引导结构不正确，您的填充和对齐问题已解决。在此处查看代码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>

【讨论】：

我注意到的唯一变化是在搜索栏中，其中“容器”移到了“行”上方。问题是，完成后，搜索栏不会扩展整个页面，看起来像这样i.imgur.com/aM8Voq5.png 好的，我已经整理了我的示例代码。请检查更新的链接CODEPEN。希望对你有帮助.. 这正是我想要的，谢谢。我现在从您的示例中了解到，主要的“容器流体”是导致我的导航/页脚出现奇怪侧隙的问题的原因。我之前的回复中提到的问题仍然存在。有没有什么办法解决这一问题？我已经包含了一个屏幕截图，其中红线之间的整个区域应该是白色的。 i.imgur.com/e2zZP8G.png 好的，该问题也已修复。请检查更新的链接CODEPEN。如果这解决了您的问题，请支持答案。谢谢你..【参考方案5】：

列通过填充创建排水沟（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移

Bootstrap

【讨论】：

以上是关于引导布局创建奇怪的填充和对齐的主要内容，如果未能解决你的问题，请参考以下文章

在引导程序中填充 List 的奇怪 Grails 行为

左右引导填充不起作用

边距或填充引导菜单

如何使引导卡拉伸到列内的屏幕高度？

实现饼图label文字对齐或引导性对齐

水平和垂直居中引导连续行中的 4 列