Question

我使用bootstrap 4作为我的laravel项目但由于某些原因它无法正常工作，我试图设置这样的帖子：个人资料图片的一列为col-md-1，其余帖子为col-md-11的11列但由于某种原因，结果如此

而不是：

这怎么可能？我对另一个页面有同样的问题，我的设置看起来像这样

<div class="container first-container">
    <div class="row" id="showEffect">
        <div class="col-md-9 col-sm-12" style="border-right: 1px solid #f1f0f0">
            <h2 class="fw-3">Alle vragen</h2><br>
            <div class="row">
                @foreach($posts as $post)
                    <div class="card" style="border: 0; border-bottom: 1px solid #f1f0f0">
                        <div class="card-body">
                            <div class="col-md-1 col-sm-1">
                                <a href="">
                                    <img src="{!! asset('images/placeholder.png') !!}" class="rounded-circle" width="50">
                                </a>
                            </div>
                            <div class="col-md-11 col-sm-11">
                                <a href="{{ $post->path() }}">
                                    <h5 class="mb-0">{{ $post->title }}</h5>
                                </a>
                                <small>
                                    <span>Kanaal</span> • {{ $post->created_at->diffForHumans() }} door
                                    <a href="">
                                        <span>{{ $post->user->username }}</span>
                                    </a>
                                </small>
                                <p class="mb-0 mt-2">{{ $post->text }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="col-md-3">
            test
        </div>

    </div>


</div>

由于某种原因，该按钮的最后col-md-3应该显示在col-md-9旁边，而是显示在页面的底部。我的bootstrap 4实现是无法正常工作，我可以注意到按钮的颜色。但是这是什么呢？提前谢谢！

PS：这是元素https://imgur.com/a/2FP67

的GIF

Answer 1

很难说在没有看到可能存在的CSS规则的情况下究竟发生了什么，但是尝试将“row”类添加到“col-md-1”和“col-md-11”的父级中：

<div class="row card-body">
    <div class="col-md-1 col-sm-1">
        ...
    </div>
    <div class="col-md-11 col-sm-11">
        ...
    </div>
</div>

请参阅文档here

Laravel - Bootstrap 4无法正常工作

1 个答案: