Question

我有一些使用bootstrap的hickup。这是交易：我有一个用4个字段的div制作的桌子，但是我希望它们在移动电话上观看时有不同的对齐方式。让我把我的表的代码放在这里帮助解释：

<div class="table-responsive container text-center">
   <div class="visible-md-block visible-lg-block row">
      <div class="col-xs-4 col-md-3"><strong>From</strong></div>
      <div class="col-xs-4 col-md-3"><strong>Points</strong></div>
      <div class="col-xs-4 col-md-3"><strong>To</strong></div>
      <div class="col-xs-12 col-md-3"><strong>Description</strong></div>    
   </div>

   <div class="row">
       <div class="col-xs-4 col-md-3">John doe</div>
       <div class="col-xs-4 col-md-3">+20</div>
       <div class="col-xs-4 col-md-3">Jane doe</div>
       <div class="col-xs-12 col-md-3">Test Description</div>
   </div>
</div>

有。如果你知道bootstrap，你现在已经意识到它将采用的布局类型。但无论如何我会解释：

当视口进入手机屏幕尺寸时，我希望描述栏低于其他列。事情是，在那个手机屏幕尺寸上，我想从中心区域（我在桌子上定义）中差异地对齐。

我希望“From”列对齐到左侧，“Points”列居中对齐，“To”列右对齐，“Description”列居中对齐，而在较大的视口上我希望它们有一个不同的对齐。我怎么能取消这样的效果？

关于天气的提示我应该使用表格或继续使用div来进行此类响应式编码：p

Answer 1

为了完成您之后的行为，您可能需要提出自己的课程，并为其提供col-xs-4和col-md-3所具有的大多数行为，并添加您自己的自酿样式，使描述列低于其他三个@media查询等。

media all and (max-width: 1000px) {
  .custom-col-xs-4 {
    float: left;
  }
  .costom-col-xs-4-lower {
    clear: both;
  }
}

在执行此操作时，请考虑此10步定位教程的第9步：http://www.barelyfitz.com/screencast/html-training/css/positioning/

Bootstrap div响应表，在断点处具有多个对齐

1 个答案: