代码之家 › 专栏 › 技术社区 › Mitkins Noldorin

小移动设备的列顺序不同/右对齐列?

bootstrap-4 css

Mitkins Noldorin · 技术社区 · 7 年前

我有以下HTML:

<ol class="log">
  <li class="row">
    <p class="col-1 time">
      17:45
    </p>
    <div class="col-md-10">
      Hereâs a comment
    </div>
    <p class="col-1 menu-column">
      <a href="#">Edit</a>
    </p>
  </li>

  ...

</ol>

以下是桌面的布局:

下面是一个小型移动设备的布局:

我想做的是正确的调整编辑链接的时间为移动设备-所以它只需要2行(但保持原来的布局为更大的设备)。在bootstrap 4中,有没有一种方法可以使用CSS来实现这一点?

2 回复 | 直到 7 年前

mahan 7 年前

使用 order-* 类来重新排序列。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<ol class="log">
  <li class="row">
    <p class="col order-0 col-md-1 time">
      17:45
    </p>
    <div class="col-12 order-2 order-md-1 col-md-10">
      Hereâs a comment
    </div>
    <p class="col order-md-2 col-md-1 menu-column text-right text-md-center">
      <a href="#">Edit</a>
    </p>
  </li>
</ol>

Gokul Sridhar 7 年前

那是因为

<div class="col-md-10">

当显示宽度为 992px 所以就这样吧 <div class="col-xs-10"> 或 <div class="col-10"> 以便自动调整到所有显示宽度

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

3 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

user9644796 · 如何检查折叠的导航栏是否打开?

7 年前

JoeSlav · 使用引导上载损坏的文件

7 年前

John · 引导程序4,表单内联未在XS视图上对齐

7 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

7 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

7 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

7 年前