Căn chỉnh div ngay trong Bootstrap 3

Question

Có cách nào trong Bootstrap 3 để căn chỉnh một div không?

Tôi biết về khả năng bù trừ nhưng tôi muốn căn chỉnh div được định dạng ở bên phải của vùng chứa trong khi nó sẽ được căn giữa trong chế độ xem di động fullwidth. Lớp 'kéo-phải' của lớp không hoạt động nữa. Họ đã quên để thay thế nó hoặc tôi thiếu một cái gì đó hiển nhiên?

<div class="row"> 
    <div class="container"> 
    <div class="col-md-4"> 
     left content 
    </div> 
    <div class="col-md-4 col-md-offset-4"> 
     <!-- The next div has a background color and its own paddings and should be aligned right--> 
     <!-- It is now in the right column but aligned left in that column --> 
     <div class="yellow_background">right content</div> 
    </div> 
    </div> 
</div> 

Shure Tôi biết cách làm điều này trong CSS, nhưng nó có thể được thực hiện trong bootstrap 3 thuần túy không?

Answer 1

Bạn có nghĩa là một cái gì đó như thế này:

HTML

<div class="row"> 
    <div class="container"> 

    <div class="col-md-4"> 
     left content 
    </div> 

    <div class="col-md-4 col-md-offset-4"> 

     <div class="yellow-background"> 
     text 
     <div class="pull-right">right content</div> 
     </div> 

    </div> 
    </div> 
</div> 

CSS

.yellow-background { 
    background: blue; 
} 

.pull-right { 
    background: yellow; 
} 

Một ví dụ đầy đủ có thể được tìm thấy trên Codepen.

Answer 2

Lớp kéo đúng là vẫn còn trong Bootstrap 3 Xem 'helper classes' here

kéo bên phải được xác định bởi

.pull-right { 
    float: right !important; 
} 

mà không cần biết thêm về phong cách và nội dung, thật khó để nói.

Nó chắc chắn kéo ngay trong JSBIN khi trang này rộng hơn 990px ​​- đó là khi kiểu dáng col-md khởi động, Bootstrap 3 là thiết bị di động đầu tiên và tất cả.

Answer 3

tôi nghĩ rằng bạn cố gắng sắp xếp các nội dung bên phải trong div, div với bù đắp đã đẩy bản thân bên phải, ở đây một số mã và LIVE sample:
FYI: .pull-right chỉ đẩy div bên phải , nhưng không phải nội dung bên trong div.

HTML:

<div class="row"> 
    <div class="container"> 
    <div class="col-md-4 someclass"> 
     left content 
    </div> 
    <div class="col-md-4 col-md-offset-4 someclass"> 
     <div class="yellow_background totheright">right content</div> 
    </div> 
    </div> 
</div> 

CSS:

.someclass{ /*this class for testing purpose only*/ 
    border:1px solid blue; 
    line-height:2em; 
} 

.totheright{ /*this will align the text to the right*/ 
    text-align:right; 
} 

.yellow_background{ 
    background-color:yellow; 
} 

Một sửa đổi:

... 
<div class="yellow_background totheright"> 
    <span>right content</span> 
    <br/>image also align-right<br/> 
    <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/> 
</div> 
... 

hy vọng nó sẽ rõ ràng vấn đề của bạn

Answer 4

Thêm offset8 để cl của bạn ass, ví dụ:

<div class="offset8">aligns to the right</div>