Question

我想在下面提到的代码中将图像放在左侧，将其描述放在右侧，将其标题放在两者的顶部。 class =＆＃34; panel-body pull-left＆＃34;没有给我预期的结果

@foreach（$ events as $ index =＆gt; $ value）

                        <a href="#" >
                            <div class="row">
                                <div class="panel pull-left">
                                    <div class="panel-body">
                                        <div class="panel-heading">
                                            <li><span class="text-left"><h4 class="panel-title pull-left">{{$events[$index]}}</h4></span></li>
                                        </div>
                                        <div class="container">

                                            <img class="panel-title pull-left" src="/image/sample.jpg" class="img-thumbnail img-responsive" alt="Cinque Terre" width="100" height="100" >
                                        </div>

                                        <div class="panel-body pull-left">
                                            <li><h6>{{$description[$index]}}</h6></li>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </a>
                    {{--echo $events[$index].$description[$index];--}}
                    @endforeach

Answer 1

这就是我在我的项目中使用bootstrap的网格实现的目标

div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div class="img">
          <img src="images/trust.png">
        </div>
      </div>
      <div class="col-sm-8">
        <div class="para1">
          <h3>Need to be sincere</h3>
          <p>These personality types embrace rationality and impartiality, excelling in intellectual debates and scientific or technological fields. They are fiercely independent, open-minded, strong-willed and imaginative.
          Diplomats focus on empathy and cooperation, shining in diplomacy and counselling. People belonging to this type group are cooperative and imaginative, often playing the role of harmonizers in their workplace or social circles.</p>
        </div>
      </div>
    </div>
  </div>

Answer 2

您的代码中存在一些错误。左拉元素都应该是兄弟姐妹。你可以这样使用，

<img class="panel-title pull-left" src="image/sample.jpg" class="img-thumbnail img-responsive" alt="Cinque Terre" width="100" height="100" ><div class="panel-body pull-left"><li><h6>Hello World</h6></li></div>

这只是一个建议。你为什么要把李作为div的孩子？李应该是ul的孩子。

Answer 3

我会把它变成这样的媒体对象：

@foreach($events as $index => $value)
<a href="#" >
    <h4 class="media-heading">{{$events[$index]}}</h4>
        <div class="media">
             <div class="media-left">
                  <img class="media-object" src="/image/sample.jpg" alt="Cinque Terre" width="100px">
             </div>
            <div class="media-body">
                <h6>{{$description[$index]}}</h6>  
            </div>
        </div>
</a>

{{ - echo $ events [$ index]。$ description [$ index]; - }} @endforeach

如何在bootsrap中将左边的对齐和图像对齐，并将其描述在右边

3 个答案: