1

A) Filters div を製品の上ではなく、製品の左側に配置したい。
B) 下のプレビューのように、products div のテキストを画像に近づけて、遠くに配置したくありません。
私はphp laravelを使用しています。

プレビュー

どうすればこれを達成できますか?

これはコードです：

@extends('layouts.app')

@section('content')
<div id="container">

<h1> Filters </h1>

        {!! Form::open(['action' => 'PostsController@store', 'method' =>'POST']) !!}
            <div class="form-group">
                    {{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}} <br>
                    {{ Form::checkbox('agree', 'yes') }} {{Form::label('id', 'ID')}}

            </div>

            {{--{{Form::submit('Submit', ['class'=>'btn bt-primary'])}}--}}

        {!! Form::close() !!}

        <h1>Products</h1>
        @if(count($products) > 0)
            @foreach($products as $product)
                <div class="well">
                    <div class="row">
                        <div class="col-md-4 col-sm-4">
                            <img style="width:40%" src="/{{$product->photo}}">
                        </div>
                        <div class="col-md-2 col-sm-2">
                            <h3><a href="/products/{{$product->id}}">{{$product->name}}</a></h3>
                            <small> {{$product->description}}</small>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <p>No posts found</p>
        @endif
</div>

@endsection

どんな助けでも大歓迎です。ありがとうございました！

4

2 に答える 2

0

このように私は推測します

<div class='row'>
  <div class='col-md-4'>
     <!--code for filters-->
  </div>
  <div class='col-md-8'>
    <div class='col-md-4'>
      <!--code for Image-->
    </div>
   <div class='col-md-8'>
      <!--code for Desciption-->
   </div>
 </div>
</div>

好みに応じて col-md-* col-sm-* を使用してください。画像が col-md-4 に収まらない場合は、画像を拡大するか、col-md-* を縮小します

于 2018-04-30T14:54:58.243 に答える