Невозможно добавить две колонки в загрузочную карту

Question

Я пытаюсь добавить две колонки внутри карты:

<div class="card bg-white black-content">
  <div class="card-body">
    <div class="col-xs-12 col-sm-6">
      <label>test</label>
    </div>
    <div class="col-xs-12 col-sm-6">
       <label>test2</label>
    </div>
  </div>
</div>

Проблема в том, что test2 отображается не справа test, а внизу (они складываютсядруг на друга), кажется, что Bootstrap создать два rows.Что я делаю не так?

Обратите внимание, что label это просто пример, у меня есть другой контент внутри него

Answer 1

Почему вы закрываете тег label с помощью </test>?Кроме того, вам нужно row, чтобы поместить в него столбцы

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card bg-white black-content">
  <div class="card-body">
    <div class="row">
      <div class="col-12 col-sm-6">
        <label>test</label>
      </div>
      <div class="col-12 col-sm-6">
        <label>test2</label>
      </div>
    </div>
  </div>
</div>

Answer 2

Как уже говорили другие, все столбцы должны быть обернуты элементом <div class="row"></div>.Также обратите внимание, что col-xs-* больше недоступен на Bootstrap 4, вместо этого вы должны использовать col-*.В любом случае, в вашем примере это было избыточно ... потому что столбцы будут принимать все доступные столбцы 12 для точек останова ниже, чем lowest-specified (в вашем случае это было SM).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="card bg-white black-content">
  <div class="card-header text-center">
    CARD
  </div>
  <div class="card-body">
  <div class="row">
      <div class="col-sm-6 bg-info text-center">
         <label>test</label>
      </div>
      <div class="col-sm-6 bg-warning text-center">
        <label>test2</label>
      </div>
  </div>
  </div>
</div>

Answer 3

Вы забыли добавить <div class="row">, чтобы обернуть ваши столбцы:

<div class="card bg-white black-content">
    <div class="card-body">
      <div class="row">
        <div class="col-xs-12 col-sm-6">
           <label>test</label>
        </div>
        <div class="col-xs-12 col-sm-6">
           <label>test2</label>
        </div>
      </div>
    </div>
</div>