2016-11-24 4 views
0

これで正常なコンテナ(コンテナ流体ではない)にスライダがあります。 問題は、スライダが完全な100%幅ではないことです(画像を見てください)。私はCSSの幅と高さを100%追加しようとしましたが、うまくいきません。 スライダを100%幅(12 col-lg-12)にする必要があります。 enter image description hereブートストラップスライダの幅親(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> 

答えて

2

問題は、ブートストラップの容器はそれぞれの側でパディングの15個の画素を有することである:ここ

コードです。このパディングを削除するには、クラスを使用します。これを行う最も賢い方法の1つは、containerと同じdivにnoPaddingクラスを追加することです。

その後、あなただけの次のCSSを設定します。

.noPadding { padding: 0 !important; } 

ページのあなたの他の領域は、あなたのスライダーはパディングが背景色には影響しないということであるよりも広いように見える理由。

+0

それは働いた!私はちょうどstyle = "padding:0!important;"を追加しました。それは長くないので、HTMLコードにProDexoriteありがとう! :-) – Ivan

+0

あなたは大歓迎です!同じ問題を再度実行する場合は、追加の埋め込みをしたくない場所でも使用できるので、クラスを作成することをお勧めします。同じマージンの要素にも同じです。 :) – ProDexorite

+0

ところで、これをあなたのHTMLコードに設定していて、それをコンテナのパディングを削除するのに使っているだけの場合は、 '!important'部分を削除して、それがなくても動作するはずです。 – ProDexorite

0

.container: padding: 0;を入力すると、<div class="col-lg-12 col-sm-12"></div>は30px widtherとなります。私はあなたがそれを行うと甘い:

.col-lg12.col-sm-12 { 
    padding: 0; 
} 
関連する問題