如何在引导移动版本中从网格中隐藏一列 [英] how to hide one column from grid in bootstrap mobile version

问题描述

我认为在引导移动版本中从网格中隐藏一列有点棘手.举个例子

<div class="col-xs-9"><p class="testimonial-about">与报纸上的广告相比，我们通过 MyJobs 成功收到了大量申请，并且会向其他公司推荐 MyJobs 以帮助他们满足招聘需求"</p>
<div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div>

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

解决方案

由于您将第二列隐藏在xs"中，因此您可以通过定义类col-xs-12"来使用第一列的全宽" 到第 1 列.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-xs-12 col-sm-9"><p class="testimonial-about">与报纸上的广告相比，我们通过 MyJobs 成功收到了大量申请，并且会向其他公司推荐 MyJobs 以帮助他们满足招聘需求"</p>

<div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div>

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.

解决方案

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.

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

这篇关于如何在引导移动版本中从网格中隐藏一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！