时间戳

首页 > 解决方案 > 如何对齐水平项目？

html - 如何对齐水平项目？

问题描述

我想在移动视图中对齐这些元素

桌面视图

我希望在移动设备上图像位于文本顶部而不是侧面。

移动视图

<div class="container">
    <div class="row vcenter">
        <div class="col-xs-12 col-sm-6 col-md-2">
            <h3>Why Us?</h3>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-10 items_why">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="/assets/img/icons/destination_expert.png"> 
                <span>Destination Expert</span>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="/assets/img/icons/faster.png">
                <span>Faster</span>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="/assets/img/icons/transparent.png"> 
                <span>Transparent</span>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="/assets/img/icons/cheaper.png"> 
                <span>Cheaper</span>
            </div>
        </div>
    </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

<div>包含s的<span>s 应该包含在另一行中，以便它们可以成为网格中另一个网格的一部分。

<div class="container">
  <div class="row vcenter">
    <div class="col-xs-12 col-sm-12 col-md-2">
      <h3>Why Us?</h3>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-10">
      <div class="row">
        <div class="col-xs-12 col-md-1">
          <img src="/assets/img/icons/destination_expert.png">
        </div>  
        <div class="col-xs-12 col-md-2"> 
          <span>Destination Expert</span>
        </div>
        <div class="col-xs-12 col-md-1">
          <img src="/assets/img/icons/faster.png">
        </div>  
        <div class="col-xs-12 col-md-2">
          <span>Faster</span>
        </div>
        <div class="col-xs-12 col-md-1">
          <img src="/assets/img/icons/transparent.png">
        </div>  
        <div class="col-xs-12 col-md-2">
          <span>Transparent</span>
        </div>
        <div class="col-xs-12 col-md-1">
          <img src="/assets/img/icons/cheaper.png"> 
        </div> 
        <div class="col-xs-12 col-md-2">
          <span>Cheaper</span>
        </div>
      </div>
    </div>
  </div>
</div>

你可以在这里试试：https ://www.bootply.com/new

推荐阅读