如何在 bootstrap 移动版中隐藏网格中的一列

Answer 1

自 Bootstrap V4 以来，

hidden-X

类已被删除。为了根据列宽隐藏列，请使用

d-none d-X-block

。基本上，您只需关闭要隐藏的尺寸的显示，然后设置更大尺寸的显示即可。

• 对所有人隐藏 .d-none
• 隐藏在 xs .d-none .d-sm-block
• 隐藏在 sm .d-sm-none .d-md-block
• 隐藏在 md .d-md-none .d-lg-block
• 隐藏在 lg .d-lg-none .d-xl-block
• 隐藏在 xl .d-xl-none

取自这个答案.

Answer 2

因为您隐藏了“xs”中的第二列，您可以通过将类“col-xs-12”定义为 column1 来使用第一列的全宽。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 col-sm-9">
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
  </div>
  <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>

Answer 3

如果您使用的是 bootstrap 4，和/或想要隐藏除超小视图以外的任何列，方法如下：

Bootstrap 3：

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

换句话说，您必须定义要隐藏列的每个单独的预定义视口大小。

Bootstrap 4：（少一点冗余）

<div class="row">
  <div class="col-lg-12 col-xl-9">       
  </div>
  <div class="col-xl-3 hidden-lg-down">
  </div>
</div>

另外，如果你想在屏幕太大时隐藏一列：

<div class="row">
  <div class="col-md-12 col-sm-9">       
  </div>
  <div class="col-sm-3 hidden-md-up">
  </div>
</div>

还请注意，

col-xs-[n]

在 bootstrap 4 中已被

col-[n]

替换

Answer 4

你必须使用的是媒体查询。

举个例子：

@media (min-width: 1000px) {
#newDiv {
  background-color: blue;
  }
.col-xs-3 {
  display: block;
  }
}

@media (max-width: 999px) {
  #newDiv {
    
  background-color: red;
  width: 100%;
  padding-right: 50px;
   margin-right: 0px;
  }
.col-xs-3 {
  display: none;
  }
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="newDiv" class="col-xs-9"><p>Hello World!</p></div>
<div class="col-xs-3"><p>Hello to you to</p></div>

全屏查看屏幕响应

Answer 5

在 Bootstrap 5 中，我们使用显示实用程序 (https://getbootstrap.com/docs/5.3/utilities/display/)。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
    <div class="col-xs-12 col-sm-9">
        <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
    </div>
    <div class="col-sm-3 center-image d-none d-sm-block">
      <img src="https://placehold.co/100x100/">
    </div>
</div>