부트 스트랩 3 : col-lg에만 해당

부트 스트랩 3 : col-lg에만 해당

---

부트 스트랩 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>

데모 : http://bootply.com/88095

또 다른 옵션은 .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가 필요하지 않습니다 .

부트 스트랩 4 데모

---

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

}

---

Adding the CSS shown below to your Bootstrap 3 application enables support for

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

classes that work exactly like the new

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

classes that have been introduced in Bootstrap 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;
}

Apart from that, it adds

pull-{ε|sm-|md-|lg-}none

for completeness, being compatible with

float-{ε|sm-|md-|lg-|xl-}none

from Bootstrap 4.

---

For those interested in text alignment, a simple solution is to create a new class:

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

Then add that class:

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

---

It is very simple using Sass, just use @extend:

.pull-right-xs { 
    @extend .pull-right;
 }

---

This is what i am using . change @screen-md-max for other sizes

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

---

This problem is solved in bootstrap-4-alpha-2.

Here is the link: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Clone it on github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

---

Just use bootstrap's responsive utility classes!

The best solution for that task is to use the following code:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

Element will be aligned to the right only on lg screens - on the rest the display attribute will be set to block as it is by default for div element. This approach is using text-right class on the parent element instead of pull-right.

Alternative solution:

The biggest disadvantage is that the html code inside needs to be repeated twice.

<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 visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>

---

You can use push and pull to change column ordering. You pull one column and push the other on large devices:

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>

---

now include bootstrap 4:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

and code should be like this:

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>

참고URL : https://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only