Question

我试图在navbar父项目的col-sm-3中制作一个带有row container-fluid的引导程序：

由于某种原因，存在行超出容器宽度的偏移量，如图像的topleft所示。你们中的任何一个人都知道如何纠正这个问题，以至于网站仍然会保持响应能力吗？以下是我的HTML和Less供参考：

<head>

    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">

    <title>Morocco</title>

    <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
    <link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">

    <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <script type = "text/javascript" src = "js/jquery.js"></script>
    <script type = "text/javascript" src = "js/bootstrap.js"></script>
    <script type = "text/javascript" src = "js/app.js"></script>

</head>


<body style = "background: #efefef">


    <!-- Navigation Bar -->


    <nav class = "navbar navbar-default">
        <div class = "container-fluid">


            <div class = "navbar-header">
                <button data-toggle = "collapse" data-target = "#nav-collapse" 
                    class = "navbar-toggle">
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                </button>
            </div>


            <div id = "nav-collapse" class = "collapse navbar-collapse">
                <ul class = "nav navbar-nav">
                    <li><a href = "index.html">Home</a></li>
                    <li><a href = "about.html">About</a></li>
                    <li><a href = "itinerary.html">Itinerary</a></li>
                    <li><a href = "trip.html">Upcoming Trip</a></li>
                    <li><a href = "service.html">Community Service</a></li>
                </ul>
            </div>


        </div>
    </nav>


    <div class = "container-fluid">

        <div class = "row">
            <div class = "block col-sm-3" style = "background: #2980b9">Filler</div>
            <div class = "block col-sm-3" style = "background: #298bba">Filler</div>
            <div class = "block col-sm-3" style = "background: #2996ba">Filler</div>
            <div class = "block col-sm-3" style = "background: #29a1ba">Filler</div>
        </div>

    </div>


</body>

@import "variables.less";

@font-face
{
    font-family: Montserrat;
    src: url("../fonts/Montserrat.woff2");
}

@font-face
{
    font-family: Avenir;
    src: url("../fonts/Avenir.woff");
}

@font-face
{
    font-family: Proxima;
    src: url("../fonts/Proxima.otf");
}

@font-face
{
    font-family: Euclid;
    src: url("../fonts/Euclid.otf");
}

@font-face
{
    font-family: Besom;
    src: url("../fonts/Besom.ttf");
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0px auto;
    padding: 0px;
}

.container-fluid, .collapse
{
    margin: 0px auto;
    padding: 0px;
}

.navbar 
{
    text-align: center;
    font-family: Euclid;
    font-size: 14px;
    letter-spacing: 3px;
    margin: 0px auto;
    padding: 0px;
}

.block
{
    text-align: center;
    font-family: Proxima;
    font-size: 12pt;
    letter-spacing: 2px;
    padding: 20px 10px;
    color: white;
    margin: 0px auto;
}

Answer 1

此CSS规则导致此问题：具体为container-fluid

.container-fluid,
.collapse {
  margin: 0px auto;
  padding: 0px;
}

这是因为您删除了container的填充，这将无法抵消应用于.row的负边距。

Bootstrap Grid CSS

.container-fluid {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto
}
.row {
  margin-right:-15px;
  margin-left:-15px
}

*您还会看到溢出导航溢出，因此您可能想要完全删除规则，而不仅仅是容器流体部分。

更新：.collapse规则通过从中移除填充来干扰.navbar-collapse规则。

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

工作示例：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px;
}
body {
  background: #efefef;
}
.navbar.navbar-default {
  text-align: center;
  font-family: Euclid;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0px auto;
  padding: 0px;
}
.block {
  text-align: center;
  font-family: Proxima;
  font-size: 12pt;
  letter-spacing: 2px;
  padding: 20px 10px;
  color: white;
  margin: 0px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button data-toggle="collapse" data-target="#nav-collapse" class="navbar-toggle">
        <span style='background-color: white' class='icon-bar'></span>
        <span style='background-color: white' class='icon-bar'></span>
        <span style='background-color: white' class='icon-bar'></span>
      </button>
    </div>

    <div id="nav-collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="itinerary.html">Itinerary</a>
        </li>
        <li><a href="trip.html">Upcoming Trip</a>
        </li>
        <li><a href="service.html">Community Service</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="block col-sm-3" style="background: #2980b9">Filler</div>
    <div class="block col-sm-3" style="background: #298bba">Filler</div>
    <div class="block col-sm-3" style="background: #2996ba">Filler</div>
    <div class="block col-sm-3" style="background: #29a1ba">Filler</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap行超过容器流体

1 个答案: