Автоматическая настройка ширины столбца в начальной загрузке - PullRequest
Новая
       33

Автоматическая настройка ширины столбца в начальной загрузке

0 голосов
/ 11 мая 2018

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

У меня есть div с классом .container, и внутри него у нас есть три div. Один с классом .col-md-3, другой с классом .col-md-6 и третий с классом .col-md-3. Третий столбец не должен быть там вообще. В некоторых случаях это будет только первый и второй div.

Можем ли мы сделать второй div занятым местом третьего, если его там нет? Есть ли в начальной загрузке метод для этого.

Пожалуйста, помогите мне.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Вы чертовски немного, но на начальной загрузке 3. добавив некоторые пользовательские CSS.

Пожалуйста, просмотрите в режиме полной страницы 

$('button').click(function(){
    $('#toggle_col').toggle();
});
.col-sm-3 {
  background-color: red;
}

.col-sm-6 {
  background-color: blue;
}

/* this will do the trick */

@media (min-width: 768px)
  .flex-row {
    display: flex;
    flex-wrap: wrap;
  }
}

.flex-col {
 flex: 1 0 auto;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row flex-row">
 <div class="col-sm-3">3</div>
 <div class="col-sm-6 flex-col">6</div>
 <div class="col-sm-3" id="toggle_col">3</div>
 </div>
</div>

<button>Toggle Column</button>
0 голосов
/ 11 мая 2018

вы можете использовать col классов до div.он будет автоматически корректироваться, если один div удален из row

проверки https://getbootstrap.com/docs/4.1/layout/grid/#equal-width для получения дополнительной информации 

.col {
  background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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

...