Question

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

Answer 1

你需要把＆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

应该做的伎俩

Answer 2

这是一个引导问题。 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-*">是您想要在该行中的任意数量的列。

制作文章在列laravel中显示

2 个答案: