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>

代码图片：

enter image description here

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

您拥有的代码应该可以正常工作，默认情况下，列将向左对齐；也许您看到的是使用.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>

Answer 3

这个问题是我的其他基本CSS造成的。

代替：

*{
   margin: 0 auto;
}

为此保证金：0自动；在我的主要 style.css 文件中，我的引导程序网格无法正常工作。现在，我删除此边距：从*自动0。

现在

我写

* {
margin: 0;
padding: 0;
}

现在我的引导网格正常运行

如何解决bootstrap 4网格系统的问题？

3 个答案:

这个问题是我的其他基本CSS造成的。