我是laravel的新手,目前正试图以两列为单位显示我的文章,但是它们显示在彼此叠加的各个行中。任何帮助都会很棒,因为这令人沮丧!大声笑
@extends('layouts.application')
@section('page_title', 'All stories')
@section('content')
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
@forelse($stories as $story)
<div class="panel panel-default">
<div class="panel-body">
<img src="https://image.freepik.com/free-vector/polygonal-lion-head_23-2147495868.jpg" class="img-responsive" alt="Responsive image">
<h3>{{ $story->title }}</h3>
<p>{{ str_limit($story->body, 217) }}</p>
<hr>
<div class="col-md-4"><a href="/posts/{{ $story->id }}" class="btn btn-latest pull-right">Read More</a></div>
</div>
</div>
@empty
<h1>Currently no stories!</h1>
@endforelse
</div>
</div>
</div>
<br>
@include('includes/_rightmenu')
@endsection
答案 0 :(得分:0)
你需要把&lt; div class =“col-md-6”&gt;在循环内部尝试以下内容:
@extends('layouts.application')
@section('page_title', 'All stories')
@section('content')
<div class="col-md-8">
<div class="row">
@forelse($stories as $story)
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://image.freepik.com/free-vector/polygonal-lion-head_23-2147495868.jpg" class="img-responsive" alt="Responsive image">
<h3>{{ $story->title }}</h3>
<p>{{ str_limit($story->body, 217) }}</p>
<hr>
<div class="col-md-4"><a href="/posts/{{ $story->id }}" class="btn btn-latest pull-right">Read More</a></div>
</div>
</div>
</div>
@empty
<h1>Currently no stories!</h1>
@endforelse
</div>
</div>
<br>
@include('includes/_rightmenu')
@endsection
应该做的伎俩
答案 1 :(得分:0)
这是一个引导问题。 Bootstrap最多允许12列。要设计列,首先要创建一个容器,创建一行并添加所需的列数
<div class="container">
<div class="row">
<div class="col-sm-2"> Add something here.
</div>
<div class="col-sm-3">This in the next column.
</div>
<div class="col-sm-3">This in the next column.
</div>
</div>
</div>
在您的情况下,loop.where *中的<div class="col-sm-*">
是您想要在该行中的任意数量的列。