Gre*_*ott 66 css twitter-bootstrap-3
我正在使用Bootstrap 3作为博客.在我的自定义CSS中,我最近添加了
body {
text-align: justify;
...
}
我喜欢大屏幕(平板电脑,桌面)的结果.但是在小屏幕(手机)上,由于较窄的列加上我的博客偶尔使用,因此合理的文本不起作用long-ish-technical-terms-like-this.
我可以响应text-align: justify 只有更大的屏幕吗？
是否可以仅通过CSS完成此操作,或者,我是否需要编写一些自定义JS来执行此操作？
小智 115
虽然提供的解决方案绝对正确,但我认为有一种不同的方法可能很有趣.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;
}
}
然后,您可以将此类添加到您的html元素:
<body class="text-justify-lg">
您还可以为text-left-xx和text-right-xx创建css规则.
Fre*_*d K 77
要获得更完整的解决方案,请尝试以
/*
* 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; }
}
小智 36
是的,就像这样(你的断点设置在48em):
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}
如果视口宽度大于48em,则第二个规则将覆盖第一个规则.
只需调整窗口大小,您就可以看到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>
我喜欢Alberdigital和Fred K的答案 - 前者提供了可以在样式表中使用的有效CSS代码,后者更加彻底.
这是两个世界中最好的.
/*
* 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; }
}