ブートストラップで固定幅を追加した後でdivを応答させる方法

Question

私はブートストラップカルーセルを使用しています。後のスタイリングの目的でdiv内に追加して固定幅を与えました。また、カルーセルの後に同じ3つのサムネイルを追加しました。今では、固定幅divのため、カルーセルとサムネイルの反応性に関する問題が発生しています。

ここでここで

<div class="container-fluid homecontent"> 
    <!-- Slider --> 
    <div id="#slider_style"> 
    <div id="carousel-example-generic" class="carousel slide customslider" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="images/nysm2.jpg" alt="nysm2"> 
      <div class="carousel-caption"> 
      ... 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/civil war.jpg" alt="CA civil war"> 
      <div class="carousel-caption"> 
      ... 
      </div> 
     </div> 
     <div class="item"> 
      <img src="images/deadpool1.jpg" alt="deadpool"> 
      <div class="carousel-caption"> 
      ... 
      </div> 
     </div> 
     ... 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    </div> 

    <!-- home page movies --> 
    <div class="container-fluid" id="maincontent"> 

    <div class="row"> 
     <div class="col-md-4 col-xs-12"> 
     <div class="thumbnail"> 
      <img src="images/deadpool1.jpg" alt="deadpool" id="mainconimg"> 
      <div class="caption"> 
      <h3 id="trop">Deadpool</h3> 
      <p><a href="#" class="btn btn-primary" id="btnview" role="button">View</a></p> 
      </div> 
     </div> 
     </div> 


     <div class="col-md-4 col-xs-12"> 
     <div class="thumbnail" id="medalthumb"> 
      <img src="images/civil war.jpg" alt="CA: Civil War" id="mainconimg2"> 
      <div class="caption"> 
      <h3 id="medal">CA: Civil War</h3> 
      <p><a href="#" class="btn btn-primary" id="btnview2" role="button">View</a></p> 
      </div> 
     </div> 
     </div> 

     <div class="col-md-4 col-xs-12"> 
     <div class="thumbnail" id="souvnthumb"> 
      <img src="images/nysm2.jpg" alt="nysm2" id="mainconimg3"> 
      <div class="caption"> 
      <h3 id="souvn">Now You See Me 2</h3> 
      <p><a href="#" class="btn btn-primary" id="btnview3" role="button">View</a></p> 
      </div> 
     </div> 
     </div> 

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

はCSS

.homecontent{ 
    width:910px; 
} 

.customslider{ 
    -webkit-box-shadow: -1px 5px 61px -6px rgba(9,212,40,1); 
    -moz-box-shadow: -1px 5px 61px -6px rgba(9,212,40,1); 
    box-shadow: -1px 5px 61px -6px rgba(9,212,40,1); 
} 

は、この問題を解決するためにいくつかのヒントが必要だコードがあります。..

Answer 1

また、必要に応じて最大幅と最小幅を与え、幅をパーセンテージで追加することもできます。あなたのケースでは

それはとてもdiv要素は、910幅の最大にし、それはあなたが好む割合を占め、他の画面サイズにまでなるだろう

div{ 
max-width:910px; 
width:100%;/* As per your preference */ 
} 

である可能性があります。必要に応じて最小幅も指定できます。こうすることで、幅の範囲を修正し、残りの部分をパーセンテージごとに調整できます。

これが役に立ちます。

Answer 2

あなたは、固定寸法の応答性を持っているつもりはありません。

パーセント（％）またはビューポートの幅（vw）単位を使用します。たとえば...

.homecontent{ 
    width: 80%; 
} 

.homecontent{ 
    width: 80vw; 
} 

Answer 3

あなたは一定の幅を設定し、要素が応答することを期待することはできません。 Bootstrap's built-in grid systemを使い、画面の大きさに合わせて幅を簡単に設定してください。この例では、

<div id="carousel" class="col-sm-12 col-md-8 col-xl-2"> 
    ---content--- 
</div> 

：画面サイズ1から12に（SM、XS、XL ...）及び幅を規定.colクラスを追加することによって、列の幅を設定し

画面が小さい場合（"sm"）、要素は画面幅の12/12に広がります。超大型の場合（"xl"）、それは画面の幅の2/12に及んでしまいます。

この方法で、任意の画面にカスタム幅を定義できます。 .colクラスを再構成して、任意の幅をピクセル単位で指定することもできます。