Bootstrap 行的中心内容，但在列时对齐

Question

我想知道 Bootstrap 中是否有办法让 row 中的 col-* 元素的内容在排列为列时左对齐或右对齐，但要对齐内容 center 当排列成行时。

以这个简单的行为例：

<div class="row">
    <div class="col-sm-8">
        Lorem ipsum
    </div>
    <div class="col-sm-4">
        Lorem ipsum
    </div>
</div>

当显示为列时，每个 div 的内容应分别左对齐和右对齐。但是当在较小的视口中作为行查看时，它们应该居中。

Answer 1

您可以按如下方式使用媒体查询：

.text-center-xs {
    text-align: center;
}    
.text-left-xs {
    text-align: left;
}    
.text-right-xs {
    text-align: right;
}


/* Small devices (tablets, 768px and up) */    
@media (min-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-right-sm {
        text-align: right;
    }
}


/* Medium devices (desktops, 992px and up) */    
@media (min-width: 992px) {
    .text-center-md {
        text-align: center;
    }
    .text-left-md {
        text-align: left;
    }
    .text-right-md {
        text-align: right;
    }
}


/* Large devices (large desktops, 1200px and up) */    
@media (min-width: 1200px) {
    .text-center-lg {
        text-align: center;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-right-lg {
        text-align: right;
    }
}

然后：

<div class="row">
    <div class="col-sm-8 text-center-xs text-left-sm">
        Lorem ipsum
    </div>
    <div class="col-sm-4 text-center-xs text-right-sm">
        Lorem ipsum
    </div>
</div>

演示：https://jsfiddle.net/iRbouh/5qkr7c5o/（尝试调整输出大小以查看结果！）

希望对你有所帮助。

Answer 2

没有使用引导程序的开箱即用预定义解决方案。 Bootstrap 确实有对齐类，但它们的设计目的不是像它们的网格/列类一样跨断点更改。也就是说，您可以使用媒体查询自己完成。

.custom-align-left,
.custom-align-right {
  text-align:center;
}

// this is when col-sm comes into play
@media(min-width:768px){
 .custom-align-left {
   text-align:left;
 }
 .custom-align-right {
   text-align:right;
 }
}

<div class="row">
    <div class="col-sm-8 custom-align-left">
        Lorem ipsum
    </div>
    <div class="col-sm-4 custom-align-right">
        Lorem ipsum
    </div>
</div>

Answer 3

要获得下图所示的效果，您需要在 bootstrap.(min).css 文件中编辑/覆盖标准引导设置。

<div class="row">
*centered text*
<div class="col-sm-8">
    *left/right aligned text*
</div>
<div class="col-sm-4">
    *left/right aligned text*
</div>

.col-* 部分： 标准的 .col-xx-xx 项都是直接由引导程序向左浮动的。

您可以将 .col-*{ float: right;} 添加到您的个人 .css 文件中。但是你需要确保你的 include 语句在 bootstrap.css 列表之后。 （最佳选择）

或者你可以直接编辑你的 bootstrap.(min).css 文件。

或者您可以在自己的 .css 文件中通过添加“！important”来使用蛮力，如图所示。

或者您可以打破所有规则，只需将 style="text-align:right !important" 语句放在您想要的任何标签中。但这太糟糕了。

from CSS Tricks

https://css-tricks.com/when-using-important-is-the-right-choice/

.row 部分：

Bootstrap 没有任何用于对齐的 .row 类。 因此，您应该会发现 .css 元素更容易生效。

将 .row {text-align:center;} 添加到包含的 .css 文件中。