50

Bootstrap 3 で div を右揃えにする方法はありますか?

オフセットの可能性は承知していますが、書式設定された div をコンテナの右側に揃えたいのですが、全幅のモバイル ビューで中央に配置する必要があります。クラス「プルライト」はもう機能していません。彼らはそれを交換するのを忘れていましたか、それとも明らかな何かが欠けていますか?

<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でこれを行う方法は知っていますが、純粋なブートストラップ3で行うことはできますか?

4

5 に答える 5

59

クラスのプルライトはまだ Bootstrap 3 にあります。ここで「ヘルパー クラス」を参照してください。

プルライトはによって定義されます

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

スタイルとコンテンツに関する詳細情報がなければ、なんとも言えません。

ページの幅が 990px​​ を超える場合、このJSBINは確実に正しく表示され ます。これは、col-md スタイリングが開始され、Bootstrap 3 が最初にモバイル化されたときです。

ブートストラップ 4

Bootstrap 4 では、.pull-right が .float-right に置き換えられていることに注意して ください https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text =pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid .

于 2013-11-03T22:23:33.457 に答える
47

次のような意味ですか。

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にあります。

于 2013-11-03T22:22:01.643 に答える
6

コンテンツを div 内で右に揃えようとしていると思います。オフセットのある div はすでに右に押し込まれています。ここにいくつかのコードとLIVE サンプルがあります:
参考: .pull-rightdiv のみを右に押しますが、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>
...

それがあなたの問題を解決することを願っています

于 2013-11-05T12:36:37.563 に答える
-4

たとえば、次のようにクラスに追加offset8します。

<div class="offset8">aligns to the right</div>
于 2016-04-06T21:51:03.917 に答える