So entfernen Sie Leerzeichen im Bootstrap-Karussell?

Question

Ich habe ein Problem mit Bootstrap Karussell - ich will es 100% Breite, von Rand zu Rand, aber ich kann nicht kleine Leerzeichen links und rechts (Ränder?) Loswerden. Ich habe schon alles probiert: Ränder, Ränder, Paddings, Umrisse in einem anderen Code-Park (Bilder, divs, bootstrap.css) - nichts hilft. Irgendwelche Hinweise? Here's what I'm talking about.

Hier ist ein Teil meiner Code:

<div class="container" style="width: 100%;"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style=""> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; "> 
     <div class="item active"> 
     <img src="img/back_1.JPG" alt="Chania" style="min-width:100%; margin: none; padding: none;"> 
     </div> 

     <div class="item"> 
     <img src="img/back_2.jpg" alt="Chania" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="img/back_3.jpg" alt="Flower" style="width:100%;" > 
     </div> 

     <div class="item"> 
     <img src="img/back_4.jpg" alt="Flower" style="width:100%;"> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Der weiße Raum auf beiden Seiten des Karussells aus der container Klasse kommen, die padding-left: 15px und padding-right: 15px hinzufügt. Während Sie dies überschreiben könnten, wäre es sinnvoller, die Klasse einfach aus Ihrem Hauptelement zu entfernen.

Beachten Sie auch, dass <div> Elemente 100% mit standardmäßig sind, so dass Sie eigentlich nicht brauchen diese äußere <div> Behälter bei alle; Sie können einfach Ihre Karussell mit <div id="myCarousel"> beginnen, wie im folgenden Beispiel gezeigt wird:

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style=""> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; "> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/100" alt="Chania" style="min-width:100%; margin: none; padding: none;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Chania" style="width:100%;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Flower" style="width:100%;"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/100" alt="Flower" style="width:100%;"> 
 
    </div> 
 
    </div> 
 
</div>

das hilft

Hoffnung! :)