CSS 如何在引导移动版本中从网格中隐藏一列

how to hide one column from grid in bootstrap mobile version

提问by PPShein

I think it's a bit tricky that I want to hide one column from a grid in bootstrap mobile version. Let's show example

我认为我想在引导移动版本中从网格中隐藏一列有点棘手。让我们举例说明

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

Above coding, I hide image portion when viewed by mobile device. What I want is I don't want that spacing of image portion even it's hidden as increasing left portion to reach till the right side.

以上编码，我在移动设备查看时隐藏了图像部分。我想要的是我不想要图像部分的间距，即使它被隐藏为增加左侧部分到达右侧。

回答by Siva

Since, you are hiding the second column in "xs", you can use the full width for the first column by defining the class "col-xs-12" to column1.

由于您将第二列隐藏在“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>

回答by Andy Braham

Since Bootstrap V4 the hidden-Xclasses have been removed. In order to hide a column based on the column width use d-none d-X-block. Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.

自 Bootstrap V4 以来，这些hidden-X类已被删除。为了根据列宽隐藏列，请使用d-none d-X-block. 基本上，您只需关闭要隐藏的尺寸的显示，然后设置更大尺寸的显示。

• Hidden on all.d-none
• Hidden on xs.d-none .d-sm-block
• Hidden on sm.d-sm-none .d-md-block
• Hidden on md.d-md-none .d-lg-block
• Hidden on lg.d-lg-none .d-xl-block
• Hidden on xl.d-xl-none

• 隐藏在所有.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

Taken from this answer.

取自这个答案。

回答by jumps4fun

If you are using bootstrap 4, and/or want to hide a column on anything other than extra small view, here is how:

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

Bootstrap 3:

引导程序 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>

in other words you have to define every single individual predefined viewport size you want the column to be hidden in.

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

Bootstrap 4:(a little less redundant)

Bootstrap 4 ：（少一点冗余）

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

Also, if you want to hide a column if the screen is too big:

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

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

also note that col-xs-[n]has been replaced by col-[n]in bootstrap 4

另请注意，col-xs-[n]已col-[n]在引导程序 4 中替换为

回答by HTMLNoob

What you have to use is media queries.

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

Here is an example:

下面是一个例子：

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

Make this full screen to see the screen response

使此全屏查看屏幕响应