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

Question

我认为我想在引导移动版本的网格中隐藏一列有点棘手。让我们显示示例

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

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

原文由 PPShein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Siva 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

取自 这个答案。

原文由 Andy Braham 发布，翻译遵循 CC BY-SA 4.0 许可协议