如何从右侧立柱防止倒塌（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

回答

相关问题