ボタンを右に合わせる

これは本当にシンプルでなければならないが、私はブートストラップ4クラスだけを使ってウィンドウの右側にボタンを設定しようとしていることが分かっている。テキストと同じ行になければなりません。ボタンを右に合わせる

<html> 
<head> 
</head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <body> 
     <div class="row"> 
      <h3 class="one">Text</h3> 
      <button class="btn btn-secondary pull-right">Button</button> 
     </div> 
    </body> 
</html>

here

出典

2017-01-27 jecabeda

Bootstrap 4 uses .float-rightブートストラップ3に.pull-rightとは対照的に、また、列を持つ適切に巣あなたの行をすることを忘れないでください。

<div class="row"> 
    <div class="col-lg-12"> 
     <h3 class="one">Text</h3> 
     <button class="btn btn-secondary float-right">Button</button> 
    </div> 
</div>

出典

2017-01-27 13:18:42

-3

はたぶん、あなたはfloatを使用することができますにコードがある：右。：

.one { 
 
    padding-left: 1em; 
 
    text-color: white; 
 
    display:inline; 
 
} 
 
.two { 
 
    background-color: #00ffff; 
 
} 
 
.pull-right{ 
 
    float:right; 
 
}

<html> 
 
<head> 
 
    
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <h3 class="one">Text</h3> 
 
     <button class="btn btn-secondary pull-right">Button</button> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-01-27 13:18:24 Alex

-2

cdnから取得しているブートストラップ4.0.0ファイルには、プル・右（またはプル・レフト）クラスがありません。 v4はアルファ版ですので、そのような問題がたくさんあります。

1））3.3.7

2をブートストラップするリバース独自のCSSを書く：

は、2つのオプションがあります。

出典

2017-01-27 13:20:04

は審査と速すぎました。ブートストラップ4には、プル - 右（プル - 左）ではなく、フロート - 右（フロート - 左）のクラスがあります。ごめんなさい。 –

行と列のシステムを使用して、求めている行に沿って何かを行うことができます。

行内に3つの列がネストされ、テキストとボタンが内側にあります。 2

<div class="row"> 
    <div class="col-sm-1"><h3 class="one">Text</h3></div> 
    <div class="col-sm-10"></div> 
    <div class="col-sm-1"><button class="btn btn-secondary pull-right">Button</button></div> 
</div>

クラス=「COL-SM-1」とインナーコラム=「COL-SM-10」クラスにこれは決してあなたが達成したいものを達成するための良い方法ですが、設定してくださいそれは動作します（画面サイズが小さすぎないと仮定します）。 grid systemはあなたのウェブページを構造化するのに最適です。

理想的には、ページの右側にボタンを固定する独自のCSSを記述します。しかし、この方法は、あなたがそれをしたくない場合には機能します。

出典

2017-01-27 13:26:27 Afterfield

<div class="container-fluid"> 
    <div class="row"> 
    <h3 class="one">Text</h3> 
    <button class="btn btn-secondary ml-auto">Button</button> 
    </div> 
</div>

.ml-autoものを揃えるのBootstraph 4の非フレキシボックスの方法です。

出典

2017-03-31 17:37:16 Killerpixler

あなたはフロートを使用したくない場合は、それを行うための最も簡単でクリーンな方法は、自動幅カラムを使用することです：

<div class="row"> 
    <div class="col"> 
    <h3 class="one">Text</h3> 
    </div> 
    <div class="col-auto"> 
    <button class="btn btn-secondary pull-right">Button</button> 
    </div> 
</div>

出典

2017-10-31 17:24:39 josemmo

答えて

関連する問題