html - 如何防止右列崩溃(2列)-Bootstrap 3

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        5年前关闭。
                                                                                            
                
        
我是Bootstrap的新手，正在尝试完成以下任务：

（左列-较大）
标题
标题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>

最佳答案

添加更多内容后崩溃了吗？仅在较窄的浏览器中查看页面时，才应这样做。

您可以尝试稍微更改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-类，因为使用移动视图时，两列的内容都非常紧密（例如在320px的视口中），最好让它移到另一列以下。

以下是有关网格选项的更多信息：http://getbootstrap.com/css/#grid-options