html - Bootstrap div 响应表在断点处具有多个对齐方式

Question

我在使用 Bootstrap 时遇到了一些问题。这是交易: 我有一个用 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，您现在就会意识到它将采用的布局类型。但无论如何我都会解释:

当视口(viewport)变为手机屏幕大小时，我希望描述列位于其他列下方。 问题是，在那个手机屏幕尺寸上，我想将对齐方式与居中对齐方式(我在 table 上定义的)不同。

我希望“From”列左对齐，“Points”列居中对齐，“To”列右对齐，“Description”列居中对齐，而在较大的视口(viewport)上我希望它们有一个不同的对齐方式。我该如何实现这种效果？

还有关于天气的提示，我应该使用表格或继续使用 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/