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

Question

我认为我想在bootstrap移动版本中隐藏网格中的一列是有点棘手的.让我们举个例子

<div class="row">
  <div class="col-xs-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-xs-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>

在编码之上,我在移动设备查看时隐藏图像部分.我想要的是我不想要图像部分的间距,即使它被隐藏为增加左边部分直到右边.

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

如果您正在使用引导程序 4，和/或想要在除超小视图之外的任何内容上隐藏列，请按以下方法操作：

引导程序 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]已col-[n]在引导程序 4 中替换为

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>

使其全屏显示以查看屏幕响应