Как исправить проблему с сеткой начальной загрузки 4?

Question

У меня проблема с сеткой Bootstrap-4.Есть 12 столбцов, и всякий раз, когда я использую менее 12 столбцов, строки автоматически центрируются.Я хочу выравнивание по левому краю, как это можно исправить?

Фрагмент моего кода:

<div class="row justify-content-start con-flex">
    <?php foreach($books as $book):?>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
        <div id="single-book">
            <div id="book-image">
                <?php print '<img src = "'.strip_tags($book->book_image).'" alt = "">';?>
                <div id="addto-cart"><a href=""><i class="fas fa-shopping-cart"></i> Add to cart</a></div>
            </div>
            <div class="book-text">
                <div id="book-name"><?= substr(htmlentities($book->book_name),0,21) ?></div>
                <div id="author">By <i><?= htmlentities($book->author) ?></i></div>
                <div id="price"><?= htmlentities($book->price) ?>.TK</div>
                <div id="book-details">
                    <?php print '<a href = "'.base_url().'users/book_view/'.$book->id.'">View details</a>'; ?>
                </div>
            </div>
        </div>  
    </div>
    <?php endforeach;?>
</div>

изображение кода:

введите описание изображения здесь

Answer 1

Согласно Bootstrap doc , который должен решить вашу проблему

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      content here...
    </div>
    <div class="col-4">
      content here...
    </div>
  </div>
</div>

Answer 2

Эта проблема была для моего другого базового CSS.

Вместо:

*{
   margin: 0 auto;
}

Для этого поля: 0 авто; в моем основном файле style.css Мои загрузочные сетки не работали должным образом. Теперь я убираю это поле: 0 auto из *.

Теперь

Я пишу

* {
margin: 0;
padding: 0;
}

Теперь мои загрузочные сетки работают нормально

Answer 3

Код у вас должен работать нормально, столбцы будут выровнены по левому краю по умолчанию;возможно, то, что вы видите, является результатом использования .container вместо .container-fluid, который использует всю ширину области просмотра.Либо это так, либо у вас может быть какой-то собственный CSS, который влияет на расположение столбцов

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-4 col-md-4 border">content here...</div>
    <div class="col-4 col-md-4 border">content here...</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row ">
    <div class="col-4 col-md-4 border">content here...</div>
    <div class="col-4 col-md-4 border">content here...</div>
  </div>
</div>