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

Question

Я пытаюсь использовать два деления столбца в одной строке.

Проверьте мой код:

<div class="col-md-12">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Left Div
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      Right Div
    </div>
  </div>
</div>

эта структура реагирует на до 574 пикселей. но когда я уменьшаю размер браузера после 574px, деления отображаются в две строки. но мое требование показать его в той же строке (слева и справа)

пожалуйста, проверьте изображение выше. что проблема.

Answer 1

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col bg-success">
          Left Div
        </div>
        <div class="col bg-warning">
          Right Div
        </div>
    </div>
  </div>
</div>

bg-success и bg-warning только для цвета

Answer 2

<div class="col-12 ">
  <div class="row">
    <div class="col-6">
      Left Div
    </div>
    <div class="col-6">
      Right Div
    </div>
 </div>

Answer 3

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

Вы можете выполнить то, что вы хотите, так:

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      Left Div
    </div>
    <div class="col-6">
      Right Div
    </div>
  </div>
</div>

Вы можете проверить этот пример рабочего кода .

Дайте мне знать, если у вас есть вопросы. Если это решит вашу проблему, обязательно проголосуйте и примите ответ.