Önyükleme satırını Bootstrap içinde hizala 3

Question

Bootstrap 3'te bir divı hizalamak için bir yol var mı?

Dengeleme olasılıklarının farkındayım, ancak biçimlendirilmiş bir div'i kapsayıcının sağına hizalamak istiyorum, ancak tam geniş bir mobil görünümde ortalanması gerekir. 'Pull-right' sınıfı artık çalışmıyor. Değiştirmeyi mi unuttun yoksa açık bir şey mi kaçırdım?

<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 CSS içinde bunu nasıl biliyorum ama saf bootstrap 3'te yapılabilir?

HTML

.yellow-background { 
    background: blue; 
} 

.pull-right { 
    background: yellow; 
} 

Tam örnek Codepen bulunabilir

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

Answer 1

böyle bir şey demek istiyorsunuz.

Answer 2

sınıf çekme hakkı hala Bootstrap 3 içinde 'helper classes' here

çekme hakkı stilleri ve içerik hakkında daha fazla bilgi olmadan

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

ile tanımlanır Bkz olduğunu söylemek zordur. sayfa 990px ​​daha geniş olduğu zaman

Kesinlikle bu JSBIN doğru çeker - col-md stil devreye giriyor, Bootstrap 3 mobil birinci ve tüm varlık zaman hangi. Bilginize
: .pull-right sadece sağa div itin

Answer 3

i, burada bazı kod ve LIVE sample div içinde sağa içeriği, zaten ofset sağa kendisini itmek ile div uyarlamayı deneyin düşünüyorum ama div içindeki içerik değil.

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

Başka modifikasyon:

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

Answer 4

sizin cl offset8 ekle o sorununuzu temizleyecektir umut Örneğin eşek,:

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