Question

] 2

在大型网格中的引导程序中，当“social recr ..”标题需要换行另一条线时，它会为品牌标识列创建一个对齐问题，因为它的标题很难正确对齐。我该如何解决引导问题

代码：

<br/>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Social Recruitment Campaigns</h3>
                    <img src="whatweCreate-SocialCampaign.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Brand Identity</h3>
                    <img src="whatweCreate-BrandID.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Responsive Career Websites</h3>
                    <img src="whatweCreate-responsive.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Career Videos</h3>
                    <img src="whatweCreate-CareerVideo.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Digital Marketing</h3>
                    <img src="whatweCreate-digitalMarketing.png" class="img-responsive">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h3>Games</h3>
                    <img src="whatweCreat-gamese.png" class="img-responsive">
                </div>

Answer 1

将所有标题插入col-md-4 div中。
用col-md-12 div
对您的图片执行相同操作。

现在所有图像都处于相同的垂直对齐

<div class="col-md-12">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Social Recruitment Campaigns</h3>  </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Brand Identity</h3> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <h3>Responsive Career Websites</h3> </div></div> 

<div class="col-md-12">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-SocialCampaign.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-BrandID.png" class="img-responsive"> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <img src="whatweCreate-responsive.png" class="img-responsive"> </div></div>

Answer 2

你可以试试这个：

<h3><br>Brand Identity</h3>

不是最好的解决方案，但它很容易并且应该有效。

Answer 3

使用BootStrap执行此操作的正确和最可取的方法是为标题和相应的图像创建行。

保持包含标题的单独第一行，后跟包含相同数量图像的行。

<强>优点：
通过这种方式，您还可以减少为应用程序创建错误网格结构的机会。另一个优点是，由于标题和图像被描绘，因此对任何单个元素进行任何更改所花费的精力很小，因为它非常模块化。

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Social Recruitment Campaigns</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Brand Identity</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Responsive Career Websites</h3></div>
</div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
 </div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Career Videos</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Digital Marketing</h3></div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><h3>Games</h3></div>
</div>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <img src="whatweCreate-responsive.png" class="img-responsive">
  </div>
</div>

以下是Fiddle

Bootstrap标题包装问题

3 个答案: