부트 스트랩 3이 처음입니다 …. 내 레이아웃에는 다음이 있습니다.
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
‘elements 2’가 col-lg 화면보다 작게 정렬되지 않도록하고 싶습니다. col-lg-6에 대해서만 클래스 풀-오른쪽을 효과적으로 갖습니다.
어떻게하면 되나요?
여기에 바이올린이 있습니다 : http://jsfiddle.net/thibs/Y6WPz/
감사합니다
답변
“요소 2″를 작은 열 (예 :)에 col-2넣은 다음 push큰 화면에서만 사용할 수 있습니다.
<div class="row">
<div class="col-lg-6 col-xs-6">elements 1</div>
<div class="col-lg-6 col-xs-6">
<div class="row">
<div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
<div class="pull-right">elements 2</div>
</div>
</div>
</div>
</div>또 다른 옵션은 .pull-right@media 쿼리 를 사용하는 실수를 무시하는 것입니다 .
@media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}마지막으로, 또 다른 옵션은 자신의 .pull-right-lgCSS 클래스 를 만드는 것입니다 .
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}최신 정보
Bootstrap 4 에는 반응 형 플로트가 포함되어 있으므로이 경우 사용하면 float-lg-right됩니다.
추가 CSS가 필요하지 않습니다 .
답변
이 LESS 스 니펫을 사용해보십시오 (위의 예제와 grid.less의 미디어 쿼리 믹스 인에서 생성됨).
@media (min-width: @screen-sm-min) {
.pull-right-sm {
float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
float: right;
}
}답변
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
float: right;
}
.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
float: left;
}
@media (max-width: 767px) {
.pull-right-not-xs, .pull-left-not-xs{
float: none;
}
.pull-right-xs {
float: right;
}
.pull-left-xs {
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-right-not-sm, .pull-left-not-sm{
float: none;
}
.pull-right-sm {
float: right;
}
.pull-left-sm {
float: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.pull-right-not-md, .pull-left-not-md{
float: none;
}
.pull-right-md {
float: right;
}
.pull-left-md {
float: left;
}
}
@media (min-width: 1200px) {
.pull-right-not-lg, .pull-left-not-lg{
float: none;
}
.pull-right-lg {
float: right;
}
.pull-left-lg {
float: left;
}
}답변
미디어 쿼리로 자신 만의 클래스를 만들 필요가 없습니다. 부트 스트랩 3은 열 순서 아래에 미디어 중단 점에 대한 플로트 순서가 이미 있습니다. http://getbootstrap.com/css/#grid-column-ordering
클래스의 구문은 col-<#grid-size>-(push|pull)-<#cols>어디 <#grid-size>XS, SM, MD 또는 LG 전자이며, <#cols>당신이 열이 그 격자 크기에 대해 이동하는 방법까지입니다. 밀거나 당기는 것은 물론 왼쪽이나 오른쪽입니다.
나는 그것을 항상 사용하므로 잘 작동한다는 것을 알았습니다.
답변
잘 작동합니다.
/* small screen portrait */
@media (max-width: 321px) {
.pull-right {
float: none!important;
}
}
/* small screen lanscape */
@media (max-width: 480px) {
.pull-right {
float: none!important;
}
}답변
아래 표시된 CSS를 Bootstrap 3 응용 프로그램에 추가하면 다음을 지원할 수 있습니다.
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right새로운 것과 똑같이 작동하는 수업
float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}rightBootstrap 4에서 소개 된 클래스들 :
@media (min-width: 768px) {
.pull-sm-left {
float: left !important;
}
.pull-sm-right {
float: right !important;
}
.pull-sm-none {
float: none !important;
}
}
@media (min-width: 992px) {
.pull-md-left {
float: left !important;
}
.pull-md-right {
float: right !important;
}
.pull-md-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.pull-lg-left {
float: left !important;
}
.pull-lg-right {
float: right !important;
}
.pull-lg-none {
float: none !important;
}
}
.pull-none {
float: none !important;
}그 외에도, 그것은 추가
pull-{ε|sm-|md-|lg-}none완전성을 위해
float-{ε|sm-|md-|lg-|xl-}none부트 스트랩 4.
답변
텍스트 정렬에 관심이있는 사람들을 위해 간단한 해결책은 새 클래스를 만드는 것입니다.
.text-right-large {
text-align: right;
}
@media (max-width: 991px) {
.text-right-large {
text-align: left;
}
}그런 다음 해당 클래스를 추가하십시오.
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right-large">
elements 2
</div>
</div>