Question

我想知道在Bootstrap中是否有一种方法可以让col-*元素的内容在排列为列时向左或向右对齐{@ 1}}但是当排列为行时，要将内容对齐 center 。

例如，采用这个简单的行：

row

当显示为列时，每个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的开箱即用的预定义解决方案。 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项目都是由bootstrap直接浮动的。

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

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

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

或者你可以打破所有规则，只需在你想要的任何标签中加上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文件中。

Bootstrap行的中心内容，但在列的时候是合理的

3 个答案: