html - Bootstrap 第一列隐藏，第二列全尺寸

Question

<div class="row">
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="panel panel-success">
                 <div class="panel-heading">Panel heading</div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="panel panel-success">
                 <div class="panel-heading">Panel heading</div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="panel panel-success">
                 <div class="panel-heading">Panel heading</div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 hidden-sm hidden-xs">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-success">
                   <div class="panel-heading">Next Gameday</div>
                  <div class="panel-body">
                    <p>Dummy text</p>
                  </div>
                </div>
              </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-success">
                   <div class="panel-heading">Next Gameday</div>
                  <div class="panel-body">
                    <p>Dummy text</p>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>

当在智能手机左右查看网站时，我想隐藏右栏并展开左栏。我已经在我的 css 中使用了@media 查询，但我不知道如何将左列扩展到全屏。

感谢您的帮助，抱歉我(有时)英语不好。

Answer 1

将 col-xs-9 col-sm-9 更改为 col-xs-12 col-sm-12。您还可以从 hidden-xs hidden-sm 元素中删除 col-xs-3 和 col-sm-3 类，以及这些都是不必要的。

<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"> ... </div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"> ... </div>

通读 Bootstrap 的 Grid System documentation 会让您受益匪浅.

就其值(value)而言，如果 col-sm-* 和 col-lg-* 类与您的 col 相同，您可以完全删除它们-xs-* 和 col-md-* 类。