반응 형으로 텍스트 정렬을 변경 하시겠습니까 (Bootstrap 3 사용)?
블로그에 Bootstrap 3을 사용하고 있습니다. 내 사용자 정의 CSS에서 최근에
body {
text-align: justify;
...
}
더 큰 화면 (태블릿, 데스크톱)에서 결과가 마음에 듭니다. 그러나 작은 화면 (전화)에서는 좁은 열과 내 블로그에서 가끔 사용하는 long-ish-technical-terms-like-this.
반응 형 으로 더 큰 화면 text-align: justify 에서만 사용할 수 있습니까 ?
CSS를 통해서만 그렇게 할 수 있습니까? 아니면 사용자 지정 JS를 작성해야합니까?
예, 다음과 같습니다 (중단 점이 48em으로 설정된 경우).
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}
두 번째 규칙은 뷰포트 너비가 48em보다 큰 경우 첫 번째 규칙을 재정의합니다.
제공된 솔루션이 절대적으로 옳지 만 흥미로울 수있는 다른 접근법이 있다고 생각합니다. 부트 스트랩은 창 크기에 의존하는 정렬 클래스를 제공하지 않지만 정의 할 수 있습니다.
.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 규칙을 만들 수도 있습니다.
보다 완전한 솔루션을 보려면 다음을 시도하십시오.
/*
* 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; }
}
라이브 데모
창 크기를 조정하기 만하면 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; }
}
제 경우에는 미디어 쿼리가 남용되는 것을 좋아하지 않습니다. 그래서 때로는 두 가지 방법으로 내용을 반복합니다. 하나는 맞춤 정렬되고 다른 하나는 정렬됩니다. 일부 코드 :
<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>
이것은 어떤 경우에 유용 할 수 있으며 수행중인 작업에 따라 다르지만 HTML의 큰 내용을 반복하는 것은 좋지 않습니다.이 솔루션은 작은 경우에만 사용할 수 있습니다.
Have you tried col-auto and mr-auto? Further info: Margin utilities With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.
<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>
It works for me, try this:
text-align: -webkit-center;
All the "text-align" classes are provided in Bootstrap : Simply use align-lg-left, align-xs-center, etc ...
참고URL : https://stackoverflow.com/questions/18602121/change-text-align-responsively-with-bootstrap-3
'Nice programing' 카테고리의 다른 글
| 프로그래밍 방식으로 Android 앱을 종료하는 방법은 무엇입니까? (0) | 2020.11.12 |
|---|---|
| Excel에서 열의 모든 셀에 동일한 텍스트 추가 (0) | 2020.11.12 |
| 두 필드로 Javascript 정렬 배열 (0) | 2020.11.12 |
| Xcode 4로 내 앱을 현지화하는 방법은 무엇입니까? (0) | 2020.11.12 |
| PostgreSQL에서 다 대다 관계를 구현하는 방법은 무엇입니까? (0) | 2020.11.12 |