블로그에 부트 스트랩 3을 사용하고 있습니다. 내 사용자 지정 CSS에서, 나는 최근에 내가 더 큰 스크린 (태블릿, 데스크톱)에 결과를 좋아(부트 스트랩 3으로) 문자 맞추기를 적절하게 변경 하시겠습니까?

body { 
    text-align: justify; 
    ... 
}

했다. 그러나 작은 화면 (전화)에서 더 좁은 열과 내 블로그의 가끔 long-ish-technical-terms-like-this 사용으로 인해 양쪽 맞춤 텍스트가 제대로 작동하지 않습니다.

text-align: justify큰 화면에서 나는 단지만을 표시 할 수 있습니까?

CSS를 통해 전적으로 가능합니까? 아니면 맞춤 JS를 작성해야합니까?

출처

2013-09-03 Greg Hendershott

- 단지 적절한 미디어 쿼리에이 서식을 넣어, 당신은 완료가 ... – CBroe

문제는 단순히 "미디어 내 자신의 무지 쿼리 "- 나는/어떻게 CSS가 조건부를 지원하는지 모르겠다. –

부트 스트랩 3에 대한 해결책이 아니지만 [Bootstrap 4] (http://v4-alpha.getbootstrap.com/components/utilities/#text-alignment)에 기본 지원이있는 것 같습니다. –

예, (중단 점은 48em로 설정된다)이 같은 : 뷰포트의 폭이 48em보다 큰 경우 두 번째 규칙은 첫 번째보다 우선합니다

body{ 
    text-align: left; 
} 
@media screen and (min-width: 48em){ 
    body{ 
     text-align: justify; 
    } 
}

출처

2013-09-03 22:01:05 StevePeev

Live Demo

그냥 창 크기를 조정하면 창 크기가 400px보다 작은 경우는 text-align:left;로 전환하는 방법을 볼 수 있습니다.

<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>

출처

2013-09-03 22:01:17 totymedli

103

제공된 솔루션은 절대적으로 적합하지만 흥미로운 다른 접근 방식이 있다고 생각합니다.

<body class="text-justify-lg">

또한 만들 수 있습니다 CSS 규칙 : 당신이 당신의 HTML 요소에이 클래스를 추가 할 수 있습니다,

.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; 
    } 
}

을 다음 : 부트 스트랩은 창 크기에 따라 맞춤 수업을 제공하지 않습니다,하지만 당신은 그것들을 정의 할 수 있습니다 텍스트 - 왼쪽 - xx 및 텍스트 - 오른쪽 - xx.

출처

2014-12-03 08:41:16 Alberdigital

나는이 예제와 설명이 더 마음에 듭니다. . –

트릭을 수행하는 정말 좋은 방법입니다. – nikoo28

큰 흥미로운 솔루션! – Milad

보다 완벽한 솔루션을 위해이 시도 :

/* 
* 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; } 
}

출처

2015-03-27 10:17:09

이 답변을 [Alberdigital의 솔루션] (http://stackoverflow.com/a/27267067/5199198)의 미디어 쿼리에서 SASS 변수와 결합했습니다. 이 솔루션의 [블로그 게시물 링크] (http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/)에는 SASS에서도 동일한 내용이 표시됩니다. –

유효한 CSS 코드가 아닙니다. 이것은 덜입니다. –

SASS/SCSS를 사용하는 경우 @ screen-XX-min을 $ screen-XX-min으로 변경하면 꿀꺽 꿀꺽 꿀꺽 꿀꺽한/또는 다른 프리 프로세서에서 SASS를 컴파일하는 경우 작동합니다 – gtamborero

-6

모든 "텍스트 정렬"클래스가 부트 스트랩에 제공됩니다 단순히 align-lg-left, align-xs-center 등을 사용하여 ...

출처

2016-01-15 09:31:39 fvandep

이것은 부트 스트랩의 기능이 아닙니다 내가 말할 수있는 한. – Warpling

Warpling이 말한 것처럼 나는 또한 이것을 발견하지 못했습니다 ... – gustavoanalytics

저는 실제로 최신 bootstrap CSS 파일에서'align-lg-left'를 찾았지만 거기에는 없습니다. –

을 내가 모두 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; } 
}

출처

2017-06-14 02:08:26

제 경우에는 미디어 쿼리가 과도하게 사용되지 않습니다. 그래서 때로는 두 가지 방식으로 내용을 반복합니다. 하나의 사용자 정의 정렬 및 다른 기본 정렬됩니다. 일부 코드 :

<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의 큰 내용을 반복하는 것은 좋은 생각이 아니다 명심 무엇에 따라,이 솔루션은 작은 경우에 사용할 수 있습니다 만 .

그것은 나를 위해 작동

출처

2017-06-27 15:04:32

이것은 나쁜 생각입니다! –

@ LuizGonçalves, 이유가 무엇입니까? 우리는 무엇인가를 비난하고, 왜 그런지 언급 할 것입니다. –

이렇게하면 콘텐츠를 두 번 전달해야합니다! 이것은 SEO 비우호적이며 페이지 크기를 증가시켜 서버가 내용을 두 번 제공하도록합니다. 우리 친구들이 다른 사람들의 대답에 대해 설명하는 것처럼 많은 방법으로 더 좋은 방법으로 만들 수 있습니다. –

-2

,이 시도 :

실제 문제입니다

text-align: -webkit-center;

출처

2017-09-13 08:03:07

(부트 스트랩 3으로) 문자 맞추기를 적절하게 변경 하시겠습니까?

답변

Live Demo

관련 문제