CSS 响应式更改文本对齐（使用 Bootstrap 3）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18602121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change text-align responsively (with Bootstrap 3)?
提问by Greg Hendershott
I'm using Bootstrap 3 for a blog. In my custom CSS, I recently added
我正在将 Bootstrap 3 用于博客。在我的自定义 CSS 中，我最近添加了
body {
text-align: justify;
...
}
I like the result on bigger screens (tablet, desktop). But on small screens (phone), justified text doesn't work very due to the narrower columns plus my blog's occasional use of long-ish-technical-terms-like-this.
我喜欢大屏幕（平板电脑、台式机）上的结果。但是在小屏幕（电话）上，由于列较窄以及我的博客偶尔使用long-ish-technical-terms-like-this.
Can I responsively have text-align: justifyonlyon bigger screens?
我可以text-align: justify只在更大的屏幕上响应吗？
Is it possible to do so solely via CSS, or, would I need to write some custom JS to do so?
是否可以仅通过 CSS 来做到这一点，或者，我是否需要编写一些自定义 JS 来做到这一点？
采纳答案by StevePeev
Yes, like this (where your breakpoint is set at 48em):
是的，像这样（你的断点设置在 48em）：
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}
The second rule will override the first if the viewport width is greater than 48em.
如果视口宽度大于 48em，第二条规则将覆盖第一条规则。
回答by Alberdigital
Although the provided solution is absolutely right, I think there is a different approach that could be interesting. Bootstrap does not provide alignment classes that depend on window size, but you can define them:
虽然提供的解决方案是绝对正确的，但我认为有一种不同的方法可能会很有趣。Bootstrap 不提供依赖于窗口大小的对齐类，但您可以定义它们：
.text-justify-xs {
text-align: justify;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.text-justify-sm {
text-align: justify;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.text-justify-md {
text-align: justify;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.text-justify-lg {
text-align: justify;
}
}
Then, you could add this classes to your html elements:
然后，您可以将这些类添加到您的 html 元素中：
<body class="text-justify-lg">
You can also create css rules for text-left-xx and text-right-xx.
您还可以为 text-left-xx 和 text-right-xx 创建 css 规则。
回答by Fred K
For a more complete solution try this:
要获得更完整的解决方案，请尝试以下操作：
/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*/
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }
@media (min-width: @screen-sm-min) {
.text-sm-left { text-align: left; }
.text-sm-right { text-align: right; }
.text-sm-center { text-align: center; }
.text-sm-justify { text-align: justify; }
}
@media (min-width: @screen-md-min) {
.text-md-left { text-align: left; }
.text-md-right { text-align: right; }
.text-md-center { text-align: center; }
.text-md-justify { text-align: justify; }
}
@media (min-width: @screen-lg-min) {
.text-lg-left { text-align: left; }
.text-lg-right { text-align: right; }
.text-lg-center { text-align: center; }
.text-lg-justify { text-align: justify; }
}
回答by totymedli
Live Demo
现场演示
Just resize the window and you can see how it will switch to text-align:left;if the window size is less than 400px.
只需调整窗口大小，您就可以看到text-align:left;如果窗口大小小于400px.
<style>
@media screen and (min-width: 400px) {
.text1 {
text-align: justify;
}
}
p {
text-align: left;
}
</style>
<p class="text1">vlédmjd fsdi dlin dsilncds ids nic dsil dsinc dlicidn lcdsn cildcndsli c dsilcdn isa slia sanil sali as as nds nds lcdsicd insd id nid ndi cas sal sa insalic lic sail il dnsailcn lic il eilwnvrur vnrei svfd nvfn vk in f,vn y,h ky,vnkivn iesnvfilsdnhvidsnvdslin dlindilc ilc lisn asiln sliac lasnl ciasnc in li nsailcn salin ilanclis cliasnc lincls iandlisan dlias casilcn alincalis cli ad lias naslicn aslinc dliasnc slince ineali dliasnc liaslci nasdlicn laincilancfrelvnln dsil cndlic ndlicna linasdlic nsalinc lias</p>
回答by Nino ?kopac
I like both Alberdigital and Fred K's answers - former provides valid CSS code you can use in your stylesheets, the latter is more thorough.
我喜欢 Alberdigital 和 Fred K 的回答——前者提供了您可以在样式表中使用的有效 CSS 代码，后者更全面。
Here's the best of both worlds.
这是两全其美的。
/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*
* EDITED by Nino ?kopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575)
*/
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }
@media (min-width: 768px) {
.text-sm-left { text-align: left; }
.text-sm-right { text-align: right; }
.text-sm-center { text-align: center; }
.text-sm-justify { text-align: justify; }
}
@media (min-width: 992px) {
.text-md-left { text-align: left; }
.text-md-right { text-align: right; }
.text-md-center { text-align: center; }
.text-md-justify { text-align: justify; }
}
@media (min-width: 1200px) {
.text-lg-left { text-align: left; }
.text-lg-right { text-align: right; }
.text-lg-center { text-align: center; }
.text-lg-justify { text-align: justify; }
}
回答by César León
In my case i dont like media queries overuse. So, sometimes i repeat the content in two ways. One custom aligned and the other default aligned. Some code:
就我而言，我不喜欢过度使用媒体查询。所以，有时我会以两种方式重复内容。一个自定义对齐，另一个默认对齐。一些代码：
<div class="col-md-6 visible-xs hidden-sm hidden-md hidden-lg">
<%-- Some content here --%>
</div>
<div class="col-md-6 text-right hidden-xs">
<%-- Same content here --%>
</div>
This might be usefull in some cases, depends on what you are doing but Keep in mind that is not a good idea to repeat large contents of HTML, this solution might be used for small cases only.
这在某些情况下可能很有用，这取决于您在做什么，但请记住，重复 HTML 的大内容不是一个好主意，此解决方案可能仅用于小案例。
回答by Pibol
Have you tried col-auto and mr-auto? Further info: Margin utilitiesWith the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.
你试过 col-auto 和 mr-auto 吗？更多信息：边距实用程序随着 v4 中转向 flexbox，您可以使用像 .mr-auto 这样的边距实用程序来强制同级列彼此远离。
<div class="container">
<div class="row">
<div class="col-auto mr-auto">
<p>Blah</p>
</div>
<div class="col-auto">
<p>Blah</p>
</div>
</div>
</div>
回答by Srinivasan.S
It works for me, try this:
它对我有用，试试这个：
text-align: -webkit-center;
回答by fvandep
All the "text-align" classes are provided in Bootstrap : Simply use align-lg-left, align-xs-center, etc ...
在引导中提供所有的“文字对齐”类：只需使用align-lg-left，align-xs-center等...
