Bootstrap 3でdivを右寄せにする方法はありますか?
オフセットの可能性があることは承知していますが、フォーマットされたdivをコンテナの右に配置したいのですが、全幅のモバイル表示では中央に配置されるべきです。クラス 'pull-right'が使えなくなりました。置き換えを忘れたのか、それとも私が何か明らかに見落としているのか?
<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でのやり方を知っていますが、純粋なbootstrap 3ではできるのでしょうか?
このような意味ですか?
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;
}
完全な例はCodepenにあります。
オフセットされたdivはすでに自分自身を右に移動させています。
参考: .pull-right
は、divを右に移動させるだけで、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;
}
別の修正です。
...
<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>
...
これで問題が解決すると思います。