2017-07-08 3 views
0

ブートストラップを使用して、画面の反対側の同じ行にテキストとボタンを表示しています。私はプル右を使用してボタンを画面の右側に持っていますが、画面の幅が狭い場合にのみ機能します。それを広げると、ボタンはテキストの隣に移動します。 Here's a JSFiddle exampleと関連するコード:ブートストラッププル右のみが小さい幅で動作する

<body> 
    <div class='container-fluid'> 
     <form class="form-inline"> 
      <div class="form-group "> 
       <label>Some Text</label> 
       <button type="button" class="btn btn-primary pull-right">Some Button</button> 
      </div> 
     </form> 
     <div><p>The button only appears on the right side of the window when the width is fairly narrow, even though it has the Bootstrap 'pull-right' class.</p></div> 

    </div> 
</body> 

すべての幅で、右側のボタンを取得する方法はありますか?申し訳ありませんが、私はBootstrapとCSSではうまくいかないので、これは私が紛失している簡単なことだと確信しています。また、これは価値があるため、電子アプリ向けですので、Chromeでのみ動作する必要があります。

ありがとうございました。

答えて

1

これは、form group divにラップされているためです。これは、小さいビューポートの全幅にすぎません。あなたはform groupを取り除き、divにwidth:100%をcssで作ることができます。

+1

それはトリックでした。本当にありがとう! – typingm

関連する問題