html - 如何解决 bootstrap 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>

代码图像：

在此处输入图像描述

标签： htmltwitter-bootstrapbootstrap-4

Answer 1

根据Bootstrap 文档，应该可以解决您的问题

<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>