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。您还可以从col-xs-3元素中删除col-sm-3和hidden-xs hidden-sm类，但这些类是不必要的。

<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来获益。

如果它们与col-sm-*和col-lg-*类完全相同，那么您可以放弃col-xs-*和col-md-*个类。

Bootstrap第1列隐藏，第2列全尺寸

1 个答案: