Question

我正在使用Bootstrap创建一个用户个人资料页面，其中图像位于左侧，用户详细信息位于右侧。

我用以下方式使用它：

<div class="row">

        <!-- Col 1 -->

        <div class="col-md-4 col-xs-6">
          <div>
               <img ..>
               <h2>Name of the user</h2>
               Sample text<br>
               <a href="#"><img src="..."></a>
               <a href="#"><img src="..."></a>
          </div>
        </div>

        <!-- Col 2 -->

        <div class="col-md-4 col-xs-6">
          <div>
               <ul class="nav nav-tabs" role="tablist">
                    <li>...</li>
               </ul>
          </div>
        </div>
</div>

在用户的图像下方，它将有他/她的名字，然后是他/她积极参与社区，然后链接到他/她的社交媒体。

当我在桌面上查看时，它看起来不错。但是，当我尝试在移动设备中查看它时，第一列整个内容左对齐。我想让它对齐中心，看起来很合适。我怎样才能做到这一点？或者我犯了什么错误？

Answer 1

您需要的课程是{{1}}

Answer 2

尝试将col-xs-4 CSS类放入DIV中：

<div class="col-md-4 col-xs-4">

这样，移动设备中的行为将与桌面相同。

如何对齐网格列（col-md-4＆amp; col-md-8）

2 个答案: