Bootstrap：列不超过 12 并被放入新行的问题答案

【问题标题】：Bootstrap: Issue with columns not adding up to 12 and being put on new rowsBootstrap：列不超过 12 并被放入新行的问题
【发布时间】：2018-09-25 08:24:41
【问题描述】：

是的，所以我很确定我在引导程序中遵循规则来构造列和行。您拥有容器，然后是特定行的行和列。我想知道为什么它会为我创建的每个帖子创建一个新行并将它们堆叠而不是将它们放在同一行直到达到 12。

这是我的代码：

<div class="container">
    <section class="row new-post">
        <div class="col-md-6">
            <header><h3>What do you have to say</h3></header>
            <form action="{{ route('postcreate') }}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="cover_image">Image (only .jpg)</label>
                    <input type="file" name="cover_image" class="form-control" id="cover_image">
                </div>
                <div class="form-group">
                    <textarea class="form-control" name="body" rows="5" placeholder="your post"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Create post</button>
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
            </form>
        </div>
    </section>


    <section class="row posts">
        <div class="col-md-2">
            @foreach($posts as $post)
                @if(Auth::user() == $post->user) 
                    <article class="post">
                     <!--   <img style="width:300; height:250px;" src="{{ asset('storage/cover_images/' . $post->cover_image) }}"> -->
                        <p>{{ $post->body }}</p>
                        <div class="info">Posted by {{ $post->user->first_name }} {{ $post->user->last_name }} on {{ $post->created_at }}</div>
                        <a href="#" >Like</a>|
                            <a href="{{ route('postedit', ['post_id' => $post->id])}}">Edit</a>|
                            <a href="{{ route('post.delete', ['post_id' => $post->id]) }}" class="post-item">Delete</a>
                    </article>
                    <br/>
                @endif
            @endforeach
        </div>
    </section>
</div>

【问题讨论】：

你不应该把@foreach($posts as $post)放在<div class="col-md-2">之外，为什么在我们</article>的末尾有一个<br/>？
哦，移动 @foreach 修复了它，谢谢。
来自我忘记删除的其他内容。
哪个版本的 Bootstrap？你确定你用的是 4 吗？

标签： html css laravel bootstrap-4

【解决方案1】：

我相信您的 form-group 课程正在干扰您想要实现的目标。尝试删除它并检查它是否适合您（删除该类后格式显然会改变，但您会知道问题的根源），否则请尝试为 form-group 编写自定义类。

我希望这会有所帮助。

【讨论】：