Как скрыть один столбец из сетки в загрузочной версии

Мне кажется, что это немного сложно, что я хочу скрыть один столбец из сетки в загрузочной версии 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>

Выше кодирования я скрываю часть изображения при просмотре мобильным устройством. Я хочу, чтобы я не хотел, чтобы промежуток части изображения даже был скрыт, поскольку увеличивая левую часть, чтобы достичь до правой стороны.

Ответы

Ответ 1

Так как вы скрываете второй столбец в "xs", вы можете использовать полную ширину для первого столбца, указав класс "col-xs-12" в столбец1.

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

Ответ 2

Что вам нужно использовать, это медиа-запросы.

Вот пример:

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

Ответ 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>

другими словами, вы должны определить каждый отдельный предопределенный размер области просмотра, в котором вы хотите скрыть столбец.

Bootstrap 4, чуть менее избыточный:

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

Также, если вы хотите скрыть столбец, если экран слишком большой:

Бутстрап 4:

<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

Ответ 4

Начиная с Bootstrap V4 классы hidden-X были удалены. Чтобы скрыть столбец по ширине столбца, используйте d-none d-X-block. Обычно вы просто отключаете отображение размера, который хотите скрыть, а затем настраиваете отображение большего размера.

  • Скрыто на всех.d-нет
  • Скрыто на xs.d-none.d-sm-block
  • Скрыто на см.d-sm-none.d-md-block
  • Скрыто в md.d-md-none.d-lg-block
  • Скрыто в lg.d-lg-none.d-xl-block
  • Скрыто на xl.d-xl-none

Взято из этого ответа.