将 div 向左和居中对齐答案

【问题标题】：Aligning divs to left and center将 div 向左和居中对齐
【发布时间】：2018-04-30 13:47:20
【问题描述】：

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

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

【问题讨论】：

这与 CSS 样式有关，而不是 php 或 laravel
col-md-4 col-sm-4

标签： html css bootstrap-grid

【解决方案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-*

【讨论】：

你的容器类在哪里，你也可以在它之外使用容器和过滤器

【解决方案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/

【讨论】：