트위터 부트 스트랩 float div right

트위터 부트 스트랩 float div right

---

bootstrapdiv를 오른쪽으로 띄우는 올바른 방법은 무엇입니까 ? pull-right권장 방법 이라고 생각 했지만 작동하지 않습니다.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

---

행 내에 두 개의 span6 div가 있으므로 행으로 구성된 12 개의 전체 범위를 차지합니다.

두 번째 span6 div에 풀 오른쪽을 추가해도 이미 오른쪽에 앉아 있기 때문에 아무것도하지 않습니다.

두 번째 span6 div의 텍스트를 오른쪽으로 정렬하려면 해당 div에 새 클래스를 추가하고 텍스트 정렬을 지정하십시오. right value eg

.myclass {
    text-align: right;
}

---

최신 정보:

EricFreese는 지난 주 부트 스트랩 2.3 릴리스에서 사용할 수있는 텍스트 정렬 유틸리티 클래스를 추가했다고 지적했다.

• .text-left
• .text-center
• .text-right

http://twitter.github.com/bootstrap/base-css.html#typography

---

div를 오른쪽에 띄우는 pull-right것이 권장되는 방법입니다. 제대로 사용하고 있다고 생각합니다.text-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

---

부트 스트랩 3에는 div 내에 텍스트를 정렬하는 클래스가 있습니다.

<div class="text-right">

오른쪽에 텍스트를 정렬합니다

<div class="pull-right">

텍스트뿐만 아니라 모든 내용을 오른쪽으로 당깁니다.

---

인라인 스타일을 추가 할 필요없이 트릭을 수행합니다.

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

답은 <div>"풀-오른쪽"클래스와 다른 것을 중첩시키는 것 입니다. 두 클래스를 결합하면 작동하지 않습니다.

---

<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

이것은 나를 위해 일합니다.

편집 : 스 니펫이있는 예 :

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>

---

텍스트 센터, 왼쪽 또는 오른쪽과 같은 클래스 이름을 지정할 수 있습니다. 이 클래스 이름에 따라 텍스트가 정렬됩니다. 추가 클래스 이름을 별도로 만들 필요는 없습니다. 이 클래스는 BootStrap 3 및 부트 스트랩 4에 내장되어 있습니다.

부트 스트랩 3

v3 텍스트 정렬 문서

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

부트 스트랩 4

v4 텍스트 정렬 문서

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

참고URL : https://stackoverflow.com/questions/14809313/twitter-bootstrap-float-div-right