引导滑块宽度父（12断点）

好吧，所以我有一个在正常容器（不包含流体）的滑块。问题是滑块不是完整的100％宽度（请看图片）。我已经尝试添加CSS宽度和高度100％，但它不起作用。我需要的滑块是100％宽度（12 col-lg-12）。引导滑块宽度父（12断点）

您可以看到空白处。它需要填充。

下面是代码：

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

来源

2016-11-24 Ivan

的问题是，自举的容器具有在每一侧填充的15个像素。使用一个类来删除这个填充。最简单，也许最明智的方法之一是将noPadding类添加到您的幻灯片container所在的同一div。

之后，您只需设置以下CSS：

.noPadding { padding: 0 !important; }

原因页面的其他领域似乎是更广泛的比你的滑块是填充不影响背景色。

来源

2016-11-24 10:10:03 ProDexorite

它的工作！我刚添加了style =“padding：0！important;”到HTML代码，因为它不长。非常感谢你ProDexorite！ :-) – Ivan

不客气！如果你再次遇到同样的问题，我会建议将它作为一个类，因为你可以在任何你不想有任何额外的填充的地方使用它。具有保证金的元素也是如此。 :) – ProDexorite

顺便说一句;如果你把这个设置为你的HTML代码，并且你只是在删除容器的填充时使用它，那么你可以删除'！important'部分，应该没有它。 – ProDexorite

如果您给.container: padding: 0;<div class="col-lg-12 col-sm-12"></div>将与30px widther。我说你这样做：

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

来源

2016-11-24 10:21:26 Molarosa

引导滑块宽度父（12断点）

回答

相关问题