Я пытаюсь выровнять два div (один слева и другой справа) внутри карты - PullRequest
Новая
       19

Я пытаюсь выровнять два div (один слева и другой справа) внутри карты

0 голосов
/ 09 января 2020

Я пытаюсь выровнять .time div (слева) и .saveIcon div (справа) внутри созданного мной .card div, но кажется, что они располагаются горизонтально слева от моего .card div. Я уверен, что упускаю что-то довольно очевидное, но любая помощь будет признательна. 

<div class="jumbotron" style="background-color:white">

  <div class="card col-lg-12">
    <div class="time col-lg-2"></div>
    <div class="card-body col-lg-8">write tasks here</div>
    <button class="saveIcon col-lg-2">
      <i class="fa fa-lock"></i>
    </button>
  </div>

</div>

1 Ответ

0 голосов
/ 09 января 2020

Итак, есть несколько проблем с предоставленным вами фрагментом, и они сводятся к тому, что Bootstrap ожидает при рендеринге макета.

Вот основные c использование тега col в Bootstrap и ожидаемый внешний макет сетки . 

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Как видите, container должен обернуть row, который затем содержит элемент col.

Согласно Bootstrap Строки и столбцы - Нужно ли использовать строку? :

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

Вот ваш исправленный код в результате соблюдения этих обязательных правил: 

<div class="container">
  <div class="card">
    <div class="card-block">
      <div class="row">

        <div class="time col-2"></div>

        <div class="card-body col-8">write tasks here</div>

        <button class="saveIcon col-2">
          <i class="fa fa-lock"></i>
        </button>

      </div>
    </div>
  </div>
</div>

Также, пожалуйста, убедитесь, что вы правильно ссылаетесь Bootstrap в своей голове: Bootstrap Начало работы

Вот JSFiddle показывает рабочий вывод с Bootstrap.

...