如何從右側立柱防止倒塌（2列） - 引導3

（左列 - 大）
標題
標題2
標題圖片標題圖片
標題
地址

（右列 - 小）
標題
第
列表項

我的問題是我怎麼防止右列倒塌左側下方？我嘗試設置一個高度，但當然這是暫時的，甚至不能正常工作。當我添加更多的內容時，右邊的列立即崩潰在左下方:(我完全迷失了，我一直在嘗試不同的東西幾個小時，有一個簡單的解決方案，我不知道？

這是我到目前爲止有：

左欄：

<div class='information'> 
    <div class='container'> 
     <div class='row'> 
     <div class='col-md-9'> 
      <div id='schedule'> 
      <h2>Schedule</h2> 
       <h3>Sunday</h3> 
       <div class='schedule-inner'> 
       <div class='schedule-heading'> 
        <div class="media"> 
        <h5 class="media-heading pull-left ">Location 1</h5> 
        <img class="media-object pull-left img-responsive" src="img/arrow.png" alt="..." /> 
        <h5 class="media-heading pull-left">Location 2</h5> 
        <img class="media-object pull-left img-responsive" src="img/arrow.png" alt="..." /> 
       <h5 class="media-heading pull-left">Location 3</h5> 
       </div> 
       </div> 

       <div class='schedule-location'> 
        <div class='col-md-3'> 
        <h4>8:00am</h4> 
        <div class='schedule-address'> 
         <address> 
         xxxxx<br> 
         xxxxx<br> 
         <span class='schedule-location-name'>(Name of location)</span> 
        </address> 
        </div> 
       </div> 
       </div> 
       </div> 
      </div> 
     </div>

右列：

<div class='pricing'> 
      <div class='col-md-3'> 
      <h3>Pricing</h3> 
      <p>Lorem ispum</p> 
      <ul> 
       <li class='icon-sprite sprite-wifi'>Wifi internet</li> 
       <li class='icon-sprite sprite-charger'>Charger</li> 
       <li class='icon-sprite sprite-battery'>Charger</li> 
      </ul> 
     </div> 
     </div>

來源

2014-03-13 user3403328

你或許應該說你期望的結果應該是什麼。因爲目前還不清楚，你是否希望它不會崩潰，你想讓定價保持在日程表之上嗎？... –

添加更多內容後會崩潰嗎？它應該在更窄的瀏覽器中查看頁面時執行此操作。

您可以嘗試改變div的順序並添加更多網格選項。如果你想在網格總是表現得一樣：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"> 
      <div class="information"> 
       Schedule information 
      </div> 
     </div> 
     <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
      <div class="pricing"> 
       Pricing information 
      </div> 
     </div> 
    </div> 
</div>

但我會建議留出至少應COL-XS-類，因爲與移動視圖它變得非常緊隨着兩列（例如320像素視口）和最好讓它低於另一個。

這裏有更多一點關於網格選項：http://getbootstrap.com/css/#grid-options

來源

2014-03-13 07:47:13 mMoovs

更改右列類col-xs-3和左內容列CL屁股col-xs-9，並確保列右邊的列是兄弟左邊的內容列col-md-9row。

<div class='pricing'> 
     <div class='col-xs-3'> 
     <h3>Pricing</h3> 
     <p>Lorem ispum</p> 
     <ul> 
      <li class='icon-sprite sprite-wifi'>Wifi internet</li> 
      <li class='icon-sprite sprite-charger'>Charger</li> 
      <li class='icon-sprite sprite-battery'>Charger</li> 
     </ul> 
    </div> 
    </div>

來源

2014-03-13 07:39:31

如何從右側立柱防止倒塌（2列） - 引導3

回答

相關問題