我想在bootstrap mobile版本中隱藏網格中的一列有點棘手。讓我們舉個例子

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

在上面的代碼中，我隱藏了移動設備看到的圖像部分。我想要的是，我不希望圖像部分的間隔，即使它是隱藏的，增加左邊部分，直到右邊。

自從Bootstrap V4以來，隱藏的X類已經被刪除。為了根據列寬隱藏列，請使用d-none d-X-block。基本上你只需關閉你想隱藏的尺寸的顯示器，然后設置更大的尺寸。

隱藏在所有。無 隱藏在xs上。沒有。d-sm-塊 隱藏在sm上。沒有。多維數據塊 藏在MD . d-MD-無。d-lg塊 隱藏在lg上。d-lg無。d-XL-塊 藏在xl上。無 摘自這個回答。

因為您隱藏了“xs”中的第二列，所以您可以通過將類“col-xs-12”定義為column1來使用第一列的全角。

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

如果您正在使用bootstrap 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>

換句話說，您必須定義想要隱藏列的每個單獨的預定義視窗大小。

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

另請注意，在引導數據庫4中，col-xs-[n]已被col-[n]取代

你要用的是媒體查詢。

這里有一個例子:

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

在Bootstrap 5中，我們使用顯示實用程序(https://get Bootstrap . com/docs/5.3/utilities/display/)。

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