Question

我是Bootstrap的新手，我正在尝试完成以下任务：

（左栏 - 更大）
标题
标题2
标题图像标题图像
标题
地址

（右栏 - 较小）
标题
第
列出项目

我的问题是如何防止右栏在左下方坍塌？我试过设置一个高度，但当然这是暂时的，它甚至不能正常工作。当我添加更多内容时，右栏会立即在左下方折叠:(。我完全迷失了。我已经尝试了几个小时不同的事情了。我必须做一个简单的修复＃＆＃ 39;我不知道？

这是我到目前为止所做的：

LEFT COLUMN：

  <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>

Answer 1

将正确的列类更改为col-xs-3，并将内容列类保留为col-xs-9，并确保右列的列与col-md-9中的左侧内容列row相同}。

<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>

Answer 2

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

您可以尝试更改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视口中）并且让它低于另一列更好。< / p>

这里有关于网格选项的更多信息：http://getbootstrap.com/css/#grid-options

如何防止右列折叠（2列） - Bootstrap 3

2 个答案: