Bootstrap Row Exceeds Container-Fluid

Ich versuche, einen Bootstrap-navbar mit 4 col-sm-3 in einem row in einem container-fluid übergeordneten Elemente zu machen:Bootstrap Row Exceeds Container-Fluid

Aus irgendeinem Grunde gibt diesen Versatz ist, wo die Reihe überschreitet die Containerbreite, wie im Bild oben links zu sehen ist. Weiß einer von euch, wie man das korrigiert, so dass die Webseite immer noch die Reaktionsfähigkeit behält? Hier ist meine HTML und Less Referenz:

<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; 
}

Quelle

2017-02-10 Malik Brahimi

Diese Regel ist das Problem: '.Behälter-Flüssigkeit, .collapse {margin: 0px auto; Auffüllen: 0px; } '. Entfernen Sie die Klasse "Container-Fluid" daraus. – vanburen

@vanburen Wie funktioniert das, wenn es dir nichts ausmacht, dass ich frage? Das ist ziemlich seltsam, wenn man bedenkt, dass ich es auf meiner anderen Website verwendet habe und es hat gut funktioniert. –

Diese CSS-Regel wird das Problem verursacht: speziell container-fluid

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

Dies passiert, weil Sie die container s Padding entfernen, die dann den negativen Rand, der auf .row angewendet wird, nicht versetzen kann.

Bootstrap Grid CSS

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

* Sie auch Überlauf Sie sehen, sind zusammengebrochen nav, so dass Sie die Regel insgesamt, nicht nur der Behälter-Flüssigkeit Teil entfernen möchten.

Update: Die .collapse Regel haben Sie mit der .navbar-collapse Regel stören durch die Polsterung von ihm zu entfernen.

.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); 
}

Arbeitsbeispiel:

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>

Quelle

2017-02-10 23:33:23 vanburen

Aus irgendeinem Grund, wenn ich die Navbar zusammenfalte, bekomme ich den gleichen Offset in der Seite der Navbar –

Bootstrap Row Exceeds Container-Fluid

Antwort

Verwandte Themen