html - 如何防止右列折叠(2 列)- Bootstrap 3

标签 html css twitter-bootstrap twitter-bootstrap-3

<分区>

我是 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- 类,因为在移动 View 中,两列(例如在 320 像素视口(viewport)中)会变得非常紧凑,最好让它低于另一列。

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

关于html - 如何防止右列折叠(2 列)- Bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22371869/

相关文章:

javascript - 将动态行插入到 HTML 表中

html - 如何强制行及其列使用​​其父元素 (jumbotron) 高度的 100%

html - Bootstrap3 - 删除容器流体

javascript - 是时候开始使用 HTML5 进行开发了吗?

javascript - Angularjs 进度圈不适用于动态输入

javascript - 从多个数据 JSON 数组写入响应

html - 图片页面边框

html - CSS Position relative goes over fixed 如何解决这个问题?

html - 在 CSS 中,如何响应地缩放多个重叠的图像?

javascript - 条件 JavaScript 不起作用