ブートストラップ：左揃えと右揃えのドロップダウンあり

Question

これらの2つの列を適切に配置することはできません。

最初の列を左揃えにし、2列目を右揃えにして、ドロップダウンポップアップを適切な場所に表示する方法の提案はありますか？ここで

はbootplyです：http://www.bootply.com/HV42nstWTG

Answer 1

は、ドロップダウンのラッパーを追加します。

コード：

<div class="container-fluid"> 
    <div class="row"> 
    <!-- This column should be left-aligned on the screen --> 
    <div class="col-md-2"> 
     left-aligned content should go here 
    </div> 
    <!-- the content in this column should be right-aligned on the screen --> 
    <div class="col-md-10"> 
     <div class="wrapper pull-right"> 
     <div class="dropdown"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support 
      <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
      <li><a href="#">HTML</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">JavaScript</a></li> 
      </ul> <a href="#">text for a link goes here</a> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

そのシンプルなだけ削除 - 右引くと2列目のオフセットMDを追加しました。これはうまくいくはずです。がんばろう！

<div class="container-fluid"> 

    <div class="row"> 
     <!-- This column should be left-aligned on the screen --> 
     <div class="col-md-2"> 
     left-aligned content should go here 
     </div> 
     <!-- the content in this column should be right-aligned on the screen --> 
     <div class="col-md-4 col-md-offset-6"> 
     <div class="dropdown"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support 
      <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
      <li><a href="#">HTML</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">JavaScript</a></li> 
      </ul> <a href="#">text for a link goes here</a> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 3

これも可能です。テキストリンクとドロップダウンの順序を変更し、両方でpull-rightを使用します。要素 `.pull右> .dropdown-menu`の検査

<div class="container-fluid"> 

    <div class="row"> 
     <!-- This column should be left-aligned on the screen --> 
     <div class="col-md-2"> 
     left-aligned content should go here 
     </div> 
     <!-- the content in this column should be right-aligned on the screen --> 
     <div class="col-md-10"> 
     <a href="#" class="pull-right">text for a link goes here</a> 
     <div class="dropdown pull-right"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Support 
      <span class="caret"></span></button> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">HTML</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">JavaScript</a></li> 
      </ul> 
      &nbsp; 
     </div> 
     </div> 
    </div> 
</div> 

http://www.bootply.com/GPbPh3Ajm1