Question

我正在某种类型的网站上工作，我被困在主页的设计中。主页应该有一个垂直图像和两行水平方形图像，我尝试使用空的＆＃34; col-md-4＆＃34;标记在方形图像的第二行上计算，但它不起作用，方形图像一直显示在垂直图像下方。

我正在使用Laravel Blade引擎，所以我希望它对于非Laravel程序员来说不会太复杂。

这是我的代码

  <div class="container">
<div class="row">
<div class="col-md-4 apple">
  @yield('apple') <!-- The Image in this tag is supposed to be vertical rectangle -->
</div>
<div class="col-md-8">
  @yield('samsung') <!-- This image is supposed to be horizontal beside the first third of apple image -->
  <!-- This one is working fine -->
</div>
</div>
  <div class="col-md-4">
    @yield('empty')
  </div>
  <div class="col-md-4">
    @yield('google') <!-- The problem goes here .. this one is supposed to be beneath the samsung image -->
    <!-- Beside the apple image which is vertically long -->
  </div>
  <div class="col-md-4">
    @yield('microsoft') <!-- And This image should be next to Google's image -->
    <!-- google's image and microsoft's image are aligned horizontally next to each other as planned -->
    <!-- The problem is with alignment of both of the images to be side by side with apple's image -->
  </div>
<div class="row">
  <div class="col-md-3">
    @yield('lg')
  </div>
  <div class="col-md-3">
    @yield('huawei')
  </div>
  <div class="col-md-3">
    @yield('sony')
  </div>
  <div class="col-md-3">
    @yield('blackberry')
  </div>
</div>

Answer 1

首先，为了拥有列，您需要一行。其次，一行最多可以包含12个列宽，这意味着您的累加量不能超过12个。更多here

有三列的例子是：

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

其次，为什么不寻找现成的template？

Answer 2

为什么你要使用很多容器？

<div class = "container">
  <div class = "row">
     <div class "col-md-4">.....
  </div>
</div>

容器自动在12列中，除非你想要

 <div class = "container-fluid"></div>

尝试使用教程网站获取更多信息

Visit this！

如何使用Bootstrap将矩形图像与垂直图片并排对齐？

2 个答案: