Html 引导第一列隐藏，第二列全尺寸 小组标题

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

小组标题 他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

小组标题 他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

下一个比赛日 虚拟文本

下一个比赛日 虚拟文本

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

---

感谢您的帮助，并为我（有时）的英语不好表示歉意。

将

col-xs-9 col-sm-9

更改为

col-xs-12 col-sm-12

。您还可以从

hidden xs hidden sm

元素中删除

col-xs-3

和

col-sm-3

类，因为它们是不必要的

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

。。。
... 

您将从阅读Bootstrap的帮助中获益

---

如果

col-xs-*

和

col-md-*

类与

col-xs-*

和

col-md-*

类相同，那么您可以将

col-sm-*

和

col-lg-*

类一起删除。

如果您使用

col-xs-12

的话，您也不需要

col-sm-12

。与col-lg-3相同@uʍopǝpısdn事实上，这就是我建议op阅读相关文档的原因。嗯。。。anweser说的很简单。。非常感谢你。在德语中有一句老话“Man sieht den Wald vor lauter Bäumen nicht”：D

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