Bootstrap Slider Breite Eltern (12 Haltepunkt)

Okay, so habe ich einen Schieberegler, der in einem normalen Container ist (nicht container-Flüssigkeit). Das Problem ist, dass der Schieberegler nicht die volle 100% Breite hat (Schau dir das Bild an). Ich habe versucht, css Breite und Höhe 100% hinzuzufügen, aber es funktioniert nicht. Ich brauche den Schieberegler 100% Breite (12 col-lg-12). Bootstrap Slider Breite Eltern (12 Haltepunkt)

Sie können den Leerraum sehen. Es muss gefüllt werden. Hier

ist der Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title> Mobtech </title> 

     <!--Ubaci bootstrap css --> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="css/basic-template.css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <!-- Nas font --> 

    </head> 
    <body> 
     <!--Slider --> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12 col-sm-12"> 

         <div id="mojslider" class="carousel slide" data-ride="carousel"> 

          <!-- Indikatori (male tacke na slajderu) --> 
          <ol class="carousel-indicators"> 
           <li data-target="#mojslider" data-slider-to="0" class="active"> </li> 
           <li data-target="#mojslider" data-slider-to="1"> </li> 
           <li data-target="#mojslider" data-slider-to="2"> </li> 
          </ol> 
          <!-- Slajd-slike --> 
          <div class="carousel-inner" role="listbox"> 
           <!--Svaki div je jedan slajd --> 
           <div class="item active"> 
            <img src="Slike/samsung.png" alt="samsungslide" /> 
            <div class="carousel-caption"> 
             <h1> <font face="Roboto Condensed" size="15" color="white"> Samsung Galaxy s7 </font> </h1> 
            </div> 
           </div> 
           <div class="item"> 
            <img src="Slike/iphone.png" alt="iphoneslide" /> 
            <div class="carousel-caption"> 
             <h1> <font face="Roboto Condensed" size="15" color="white"> iPhone 7 </font> </h1> 
            </div> 
           </div> 
           <div class="item"> 
            <img src="Slike/lg.png" alt="lglide" /> 
            <div class="carousel-caption"> 
             <h1> <font face="Roboto Condensed" size="15" color="white"> LG V10 </font> </h1> 
            </div> 
           </div> 
          </div> 
          <!-- Kontrole - next i prev dugme --> 
          <a class="left carousel-control" href="#mojslider" role="button" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span> 
          </a> 
          <a class="right carousel-control" href="#mojslider" role="button" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> 
          </a> 


         </div> 

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

      <br/> 

      <!--Container 1 - Mobtech - uvek sa Vama! --> 
      <div class="container"> 
       <div class="row"> 
        <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone --> 
        <div class="col-lg-12 bg-zelenapozadina"> 
         <div class="col-lg-12 bg-zelenapozadina"> 
          <center> <font face="Roboto Condensed" size="6"> Mobtech - uvek sa Vama ! </font> </center> 
          <p> 
          <font face="Roboto Condensed" size="4"> 
          Lorem ipsum dolor sit amet, his no postulant liberavisse. At nibh lucilius sed. Omnium latine efficiendi ea vis. Elit facilisis mel et. Eu qui erat tation elaboraret. Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu. 

          Iriure accommodare vim et. Sed alia munere pertinax no. Duo eu sumo possim, nam te omnis offendit, no scaevola oportere his. Ut qui dolor scripserit reprehendunt. Ne sea zril vivendo, duo iudico aliquam laoreet eu, cu nullam essent delectus ius. 

          Pri facer accusam omittam eu, eam id dico prompta recusabo. Vix an suas alia putent, quo utinam deleniti legendos ne. Vis et nibh fugit aliquam. Ex est salutandi interesset, soluta ancillae incorrupte sea ne. Qui id velit dicunt interpretaris, ad option blandit nam. Odio mucius adversarium has at. Duo option intellegebat signiferumque ex, ut oblique detraxit sit. 
          </font> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 

      <br/> 

      <!-- JavaScript fajl --> 
      <script src="js/jquery.min.js"></script> 
      <!-- Kompresovan JavaScript fajl --> 
      <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

Quelle

2016-11-24 Ivan

Das Problem besteht darin, dass Bootstrap des Containers 15 Pixel der Polsterung auf jeder Seite hat. Verwenden Sie eine Klasse, um diese Auffüllung zu entfernen. Einfachste und vielleicht eine der weisesten Möglichkeiten, dies zu tun ist noPadding Klasse zu der gleichen div Ihre Diashow container ist hinzuzufügen.

Danach werden Sie nur die folgende CSS ein:

.noPadding { padding: 0 !important; }

Der Grund Ihrer anderen Bereiche der Seite scheinen breiter als Ihr Schieber ist, dass die Polsterung nicht Hintergrund-Farbe nicht beeinträchtigt.

Quelle

2016-11-24 10:10:03 ProDexorite

Es hat funktioniert! Ich habe gerade hinzugefügt style = "padding: 0! Wichtig;" zum HTML-Code, weil es nicht lange ist. Vielen Dank ProDexorite! :-) – Ivan

Gern geschehen! Wenn Sie das gleiche Problem erneut anzeigen, würde ich empfehlen, es zu einer Klasse zu machen, da Sie es überall verwenden können, wo Sie keine zusätzliche Auffüllung wünschen. Gleiches gilt für Elemente mit Rand. :) – ProDexorite

Übrigens; Wenn Sie dies auf Ihren HTML-Code eingestellt haben und ihn nur beim Entfernen des Containers verwenden, können Sie den '! Wichtig'-Teil entfernen, ohne ihn zu verwenden. – ProDexorite

Wenn Sie die .container: padding: 0; geben, wird die <div class="col-lg-12 col-sm-12"></div> mit 30px widther sein. Ich suggest Sie tun, dass:

.col-lg12.col-sm-12 { 
    padding: 0; 
}

Quelle

2016-11-24 10:21:26 Molarosa

Bootstrap Slider Breite Eltern (12 Haltepunkt)

Antwort

Verwandte Themen