使用引導程序的響應佈局

<div class="jumbotron vertical-center bgpurpletextoffwhite"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-2 col-sm-5 col-md-5"> 
       </div> 
       <div class="col-xs-3 col-sm-1 col-md-1"> 
        <img src="./assets/images/pmflogo-transparent.png"/> 
       </div> 
       <div class="col-xs-7 col-sm-6 col-md-6"> 
       <br> 
        <h3>Put Me First </h3> 
       </div> 
      </div>

這是我的代碼。我希望它能夠對所有設備做出響應，但目前它的行爲並不靈敏。爲了使其響應，我需要做些什麼改變。使用引導程序的響應佈局

來源

2015-04-22 vs_9

你錯過了兩個封閉的div。 – vdwijngaert

請向我們展示您的輸出並描述您的需求。 –

@ vs_9如果你包含相關的css規則（不是整個css表單，只是在這裏引用的類），會更容易。這將節省人們不得不下載bootstrap，找到css，然後相關規則本身，如果他們目前沒有使用引導。 – Stumbler

如果您使用引導並且您的代碼正確，它應該是有響應的。您也在代碼中丟失了2個關閉div標籤</div>。

這裏是一個小提琴：https://jsfiddle.net/jaephoenix/h86mabte/

您的代碼應該是這樣的：

<div class="jumbotron vertical-center bgpurpletextoffwhite"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-2 col-sm-5 col-md-5"> 
      </div> 
      <div class="col-xs-3 col-sm-1 col-md-1"> 
       <img src="s30.postimg.org/ozhb3rw8t/pmflogo.png"/> 
      </div> 
      <div class="col-xs-7 col-sm-6 col-md-6"> 
       <br /> 
       <h3>Put Me First </h3> 
      </div> 
     </div> <!-- Close div for .row --> 
    </div> <!-- Close div for .container --> 
</div> <!-- Close div for .jumbotron -->

來源

2015-04-22 12:08:49

當我重新調整瀏覽器窗口大小時，圖像和文本之間的距離不斷變化。我希望兩者之間的距離在任何位置保持固定/不變。 –

bootstrap * col *函數用於響應。以下是一個很好的解釋：http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem。如果你不希望它改變大小，請嘗試在你的div上使用col-xs- *或嘗試在你的CSS中給你的div的靜態寬度值。 –

我用過的圖片的鏈接是 - s30.postimg.org/ozhb3rw8t/pmflogo.png –

使用引導程序的響應佈局

回答

相關問題