2016-09-04 10 views
0

再度、質問はJSFiddleで最もよく説明されています。ドロップダウンメニューのラジオボタンインラインフォームの横にブートストラップ入力を配置

<div> 
    <span style='cursor:pointer; float:right'> 
            <div class="btn-group pull-right"> 
             <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
              <span class="glyphicon glyphicon-cog"></span> 
    </button> 
    <ul style='padding:10px' class="dropdown-menu"> 
    <li class="dropdown-submenu"> 
     <input id="full_package_filter" type="checkbox" name="vehicle" checked>Foo<span class='useful_stat'></span> 
    </li> 
    <li class="dropdown-submenu"> 
     <div class="container"> 
     <span>Number:</span> 
     <span> 
    <label class="checkbox-inline"> 
     <input type="checkbox" value="">< 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" value="">= 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" value="">> 
    </label> 
    </span> 
     <span><input class="form-control input-sm" id="inputsm" type="text"></span> 
     </div> 

    </li> 
    </ul> 
</div> 
</span> 
</div> 

私の目標は、小さな入力ボックスをラジオボタンの隣に(1行に)配置することです。私は、ブートストラップ・グリッド・システムを使用しなければならないと思いますが、方法を理解できません。すべての私の試みは狂った結果をもたらす。何か案は ?

答えて

0

このようなものをお探しですか?

<div> 
    <span style='cursor:pointer; float:right'> 
     <div class="btn-group pull-right"> 
      <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <span class="glyphicon glyphicon-cog"></span> 
      </button> 
      <ul style='padding:10px' class="dropdown-menu"> 
       <li class="dropdown-submenu"> 
        <input id="full_package_filter" type="checkbox" name="vehicle" checked>Foo<span class='useful_stat'></span> 
       </li> 
       <li class="dropdown-submenu"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-md-3"> 
           <span>Number:</span> 
           <span> 
            <label class="checkbox-inline"> 
             <input type="checkbox" value="">< 
            </label> 
            <label class="checkbox-inline"> 
             <input type="checkbox" value="">= 
            </label> 
            <label class="checkbox-inline"> 
             <input type="checkbox" value="">> 
            </label> 
           </span> 
          </div> 
          <div class="col-md-3"> 
           <span><input class="form-control input-sm" id="inputsm" type="text"></span> 
          </div> 
          <div class="col-md-6"></div> 
         </div> 
        </div> 

       </li> 
      </ul> 
     </div> 
    </span> 
</div> 

これが役立ったかどうか教えてください。 :)

+0

これは私のコードと同じ結果をもたらすようです。 –

+0

私は質問を更新しました。あなたは解決策に近いです。しかし、私は自分自身に来ました。単純に私は調整できませんでした –

関連する問題