引导标题换行问题

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

1. 在 col-md-4 div 中插入所有标题。
2. 用 col-md-12 div 包装它们
3. 对您的图像执行相同的操作。

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

<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