Question

A）我希望我的Filters div与产品左侧对齐，而不是在Products上方。
B）我希望产品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

任何帮助将不胜感激。谢谢！

Answer 1

这种方式我想

<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 - *

Answer 2

这样做：

Filters:

    <div class="container">
      <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">image tag here </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">description here</div>
      </div>

这里有一个链接，只需调整输出窗口的大小即可看到效果 https://jsfiddle.net/pjozbeye/1/

将div对齐到左侧和中间

2 个答案: