Html Bootstrap：如何没有特定大小的文本权限？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25536497/
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
Bootstrap: how to not have text-right in certain size?
提问by The Nomad
Using Twitter Bootstrap, when I reduce the size of my browser to XS size. This is my footer. I have the text-rightproperty to handle the rest of the screen sizes, but on XS, it still aligns it to the right after stacking.
使用 Twitter Bootstrap，当我将浏览器的大小减小到 XS 大小时。这是我的页脚。我有text-right处理其余屏幕尺寸的属性，但在 XS 上，它仍然在堆叠后将其向右对齐。
How do I get this to not text-righton XS screen sizes?
如何text-right让它不在XS 屏幕尺寸上显示？
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 copyright">
<p>© 2014 LFDate. All rights reserved.</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-inline text-right">
<li><p><a href="#">Blog</a></p></li>
<li><p><a href="#">Press</a></p></li>
<li><p><a href="#">Jobs</a></p></li>
<li><p><a href="#">Contact</a></p></li>
</ul>
</div>
</div>
</div>
</footer>
采纳答案by Kamil
You can simply rewrite it using CSS:
你可以简单地使用 CSS 重写它：
@media (max-width: 767px) {
footer .text-right { text-align:center }
}
xs size is for 767px and lower resolutions.
xs 大小适用于 767px 和更低的分辨率。
回答by ahaurat
Bootstrap 4 has added new css classes for this purpose:
Bootstrap 4为此添加了新的 css 类：
<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>
回答by Kevin Pei
Found this gem on GitHub:https://github.com/twbs/bootstrap/issues/11292
在 GitHub 上找到了这个 gem：https: //github.com/twbs/bootstrap/issues/11292
It adds responsive classes for text left and right
它为左右文本添加了响应类
.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
text-align: justify;
}
@media (max-width: 767px) {
.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
text-align: inherit;
}
.text-left-xs {
text-align: left;
}
.text-center-xs {
text-align: center;
}
.text-right-xs {
text-align: right;
}
.text-justify-xs {
text-align: justify;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
text-align: inherit;
}
.text-left-sm {
text-align: left;
}
.text-center-sm {
text-align: center;
}
.text-right-sm {
text-align: right;
}
.text-justify-sm {
text-align: justify;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
text-align: inherit;
}
.text-left-md {
text-align: left;
}
.text-center-md {
text-align: center;
}
.text-right-md {
text-align: right;
}
.text-justify-md {
text-align: justify;
}
}
@media (min-width: 1200px) {
.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
text-align: inherit;
}
.text-left-lg {
text-align: left;
}
.text-center-lg {
text-align: center;
}
.text-right-lg {
text-align: right;
}
.text-justify-lg {
text-align: justify;
}
}
