ブートストラップでボタンを右に揃える方法4

これを見てみましたが、この特定の問題に関連するものは見つかりませんでした。ブートストラップでボタンを右に揃える方法4

私は、画面の左右に画面のロゴが中央に表示されているヘッダーを作成しようとしていますが、ウィンドウを小さくまたは大きくすると、右のボタンは整列したままになりません。ここで

コードです：

<header> 
     <div id="container-fluid"> 
      <div class="row">    
       <div class=" col-2"> 
        Menu 
       </div> 
       <div class="col-8 text-center "> 
        Logo 
       </div> 
       <div class="col-2 float-right"> 
        Contact 
       </div> 
      </div> 
     </div>    
    </header>

は、私はここで何をしないのですか？

ありがとうございます。それを修正

、コードは次のようになります。

<body> 
    <header> 
     <div id="container-fluid"> 
      <div class="row">    
       <div class="col"> 
        <span class="float-left">Menu</span> 
       </div> 
       <div class="col text-center"> 
        Logo      
       </div> 
       <div class="col"> 
        <span class="float-right">Contact</span> 
       </div> 
      </div> 
     </div>    
    </header>   
</body>

出典

2017-12-05 Nathan Ruth

それは親コンテナに応じて整列させることができるので、あなたのコンテンツをラップします。

<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://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<header> 
 
    <div id="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-2"> 
 
     <span class="float-left">Menu</span> 
 
     </div> 
 
     <div class="col-8 text-center"> 
 
     Logo 
 
     </div> 
 
     <div class="col-2"> 
 
     <span class="float-right">Contact</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>

出典

2017-12-05 16:56:47

感謝を期待しているものと同様の達成するのに役立ちます！スパンがトリックでした。 –

@ダニエルそれはすてきなトリックです。 –

@ NathanRuth Cool = D –

あなたが使用している列のグリッドのどのようなサイズに定義やりなさい。 col-xs、col-sm、col-md、col-lgを使用すると、特定のコードに対して異なる効果が得られます。スニペットコードを下のフルページで実行し、ブラウザのサイズを変更したときのcol-sizeの影響を確認してください。

アップデート - ブートストラップ4は、col-xsをcol-

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<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"> 
 

 
<div id="container-fluid"> 
 
    Col:xs 
 
    <div class="row"> 
 
    <div class=" col-2"> 
 
     Menu 
 
    </div> 
 
    <div class="col-8 text-center "> 
 
     Logo 
 
    </div> 
 
    <div class="col-2 float-right"> 
 
     Contact 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 

 
<div id="container-fluid"> 
 
Col:sm 
 
    <div class="row"> 
 
    <div class=" col-sm-2"> 
 
     Menu 
 
    </div> 
 
    <div class="col-sm-8 text-center "> 
 
     Logo 
 
    </div> 
 
    <div class="col-sm-2 float-right"> 
 
     Contact 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 

 
<div id="container-fluid"> 
 
Col:md 
 
    <div class="row"> 
 
    <div class=" col-md-2"> 
 
     Menu 
 
    </div> 
 
    <div class="col-md-8 text-center "> 
 
     Logo 
 
    </div> 
 
    <div class="col-md-2 float-right"> 
 
     Contact 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 

 

 
<div id="container-fluid"> 
 
Col:lg 
 
    <div class="row"> 
 
    <div class=" col-lg-2"> 
 
     Menu 
 
    </div> 
 
    <div class="col-lg-8 text-center "> 
 
     Logo 
 
    </div> 
 
    <div class="col-lg-2 float-right"> 
 
     Contact 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-12-05 16:58:51

まだ動作しません。画面サイズの右側に固定する必要があります。 –

コンテナ流体を使用して右に固執させ、列グリッドサイズを定義することはできません。これらは、デバイスの画面サイズやブラウザによって異なります。それを達成したいのであれば、floatを使った単純なflexboxを代わりに使うのはどうですか？ –

ではなく、それが

col-xs-* for extra-small screen size devices

col-sm-* for small screen size devices

col-md-* for medium screen size devices

です col-2としてはそのようなクラスが存在しません

col-lg-* for large small screen size devices

 <header> 
     <div id="container-fluid"> 
      <div class="row">    
       <div class="col-xs-2"> 
        Menu 
       </div> 
       <div class="col-xs-8"> 
        Logo 
       </div> 
       <div class="col-xs-2"> 
        Contact 
       </div> 
      </div> 
     </div>    
    </header>

This linkはあなたが

出典

2017-12-05 17:04:55

本当ですか？ドキュメントには、クラスが存在すると記載されています。 https://getbootstrap.com/docs/4.0/layout/grid/ –

@NathanRuth私は、スクリーンサイズとして 'col-2'のようなクラスが必要であると言うことを意味します定義されています。 –

ブートストラップでボタンを右に揃える方法4

答えて

関連する問題