Блог

Главная - Вопросы по программированию - Как показать один столбец в bootstrap, когда есть один элемент, но показать два столбца, когда есть два элемента

Как показать один столбец в bootstrap, когда есть один элемент, но показать два столбца, когда есть два элемента

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я работаю с классом row в bootstrap. Строка состоит из двух столбцов. Один предназначен для x , а другой — для Y. Существуют динамические ситуации, когда внутри строки будет либо столбец X, либо столбец Y, либо оба столбца. Мой запрос заключается в том, что в одной строке может быть 12 столбцов, поэтому, когда у меня есть только столбец X, он будет принимать col-md-12, а когда в обоих столбцах есть X и Y, тогда X и Y будут принимать col-md-6 и col-md-6 соответственно внутри строки.

Пример 

 <div class="row">
    <div class="col-md-6">x</div>
    <div class="col-md-6">y</div>
</div>

Когда приходит только один элемент (X) из базы данных, тогда 

 <div class="row">
    <div class="col-md-12">x</div>
</div>

Спасибо!

Комментарии:

1. Это задача внутреннего приложения или механизма создания шаблонов JavaScript, такого как React или Angular. В HTML не так много логических механизмов. Вы могли бы сделать это с помощью базового JavaScript, но это стало бы громоздким, если у вас больше, чем несколько простых случаев.

2. Большое спасибо за быстрый ответ!

Ответ №1:

Вы можете попробовать установить для всего col класса значение all div , это автоматически отрегулирует ширину. Однако это будет действовать одинаково на всех устройствах.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col" style="background-color:red;">Div 1</div>
    </div>

    <div class="row">
      <div class="col" style="background-color:yellow;">Div 1</div>
      <div class="col" style="background-color:orange;">Div 2</div>
    </div>
  </div>