如何在引導程序中添加固定寬度後創建div響應

-1

我使用引導程序傳送帶，爲了以後的樣式目的，我在div中添加了它並給出了固定寬度。旋轉木馬之後，我還添加了3個縮略圖，這些縮略圖也在同一個div內。現在，由於固定寬度div，我在旋轉木馬和縮略圖的響應速度方面遇到了問題。如何在引導程序中添加固定寬度後創建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); 
}

需要一些技巧來解決這個..

來源

2016-09-15 Kasun

嗨，看我更新的答案，如果你發現它的工作，請接受它;） – DotBot

你也可以嘗試按照你的需要給它最大和最小寬度，並增加百分比寬度。

你的情況可能是

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

所以股利將獲得最多910寬度的和其他屏幕尺寸上它佔用了你喜歡的百分比。如果需要，還可以提及最小寬度。這樣你可以修復寬度範圍，其餘的按照百分比進行調整。

希望這會有所幫助。

來源

2016-09-15 19:30:32

你不會有固定尺寸的響應。

使用百分比（％）或視口寬度（vw）單位。例如...

.homecontent{ 
    width: 80%; 
} 

.homecontent{ 
    width: 80vw; 
}

來源

2016-09-15 19:05:16

您不能設置固定的寬度和預期元素來響應。使用Bootstrap's built-in grid system並根據屏幕尺寸輕鬆設置寬度。

通過添加.col類，定義屏幕尺寸（SM，XS，XL ...）從1至12和寬度設置列寬度：

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

在這個例子中，當屏幕很小時（「sm」），元素將跨越屏幕寬度的12/12。當它超大時（「xl」） - 它將跨越屏幕寬度的2/12，依此類推。

這樣，您可以將自定義寬度定義爲任何所需的屏幕。您甚至可以重新配置.col類，並以像素爲單位給它們任意的寬度。

來源

2016-09-15 19:14:29 DotBot

如何在引導程序中添加固定寬度後創建div響應

回答

相關問題