1. ホーム
  2. 質問と答え
  3. ブートストラップ・パネルの選択オプションの右側にブートストラップ・ボタンを配置する方法

ブートストラップ・パネルの選択オプションの右側にブートストラップ・ボタンを配置する方法

2017-01-26 17 views
0

図のようにブートストラップ・ボタンを右に揃えたいとします。ブートストラップパネルとform-horizontalを使用しています。 enter image description hereブートストラップ・パネルの選択オプションの右側にブートストラップ・ボタンを配置する方法

デフォルトでは、ボタンはオプションの下に置かれています。私が試してみました：

<button style="float: right" type="button" id="show-contact-modal-button" class="btn btn-primary">

をこれが右にまだドロップダウンの下のボタンを揃えます。

<div class=text-right><button ...>

これは実際には完全にここで

:-)ボタンを削除し、より完全なHTMLです：

... 

<form class="form-horizontal" role="form" method="POST" action="http://host/lead"> 

... 
<!-- Contacts --> 
<div class="form-group"> 
    <label for="contact_id" class="col-md-2 control-label">Contact</label> 
    <div class="col-md-8"> 
     <select name="contact_id" id="contacts-select" class="form-control" title=""> 
          <option value="1" 
           > 
        Eugene van der Merwe</option> 
          <option value="2" 
           > 
        Person B</option> 
          <option value="3" 
           > 
        Person C</option> 
        </select> 

     <button type="button" id="show-contact-modal-button" class="btn btn-primary"> 
      Add contact 
     </button> 

      </div> 
</div> 
<!-- // Contacts --> 

<!-- Referrer --> 
<div class="form-group"> 
    <label for="referrer_id" class="col-md-2 control-label">Referrer</label> 
    <div class="col-md-8"> 
     <select name="referrer_id" id="referrers-select" class="form-control" title=""> 
          <option value="1" 
           >Eugene van der Merwe</option> 
          <option value="2" 
           >Person B</option> 
          <option value="3" 
           >Person C</option> 
          <div class=text-right> 
       <button style="float: right" type="button" id="show-referrer-modal-button" class="btn btn-primary"> 
        Add referrer 
       </button> 
       </div> 
     </select> 



      </div> 
</div> 
<!-- // Referrer --> 
          <div class="form-group"> 
           <div class="col-md-8 col-md-offset-2"> 
            <button type="submit" class="btn btn-primary"> 
             Create 
            </button> 
           </div> 
          </div> 
         </form>

出典

2017-01-26 Eugene van der Merwe

+0

あなたがこれを追加したり、ライブデモ –

+0

を見せるuが幅を縮小した場合、私は..コルが-MD-8が完全に選択メニューで取られるのdivに幅を与えフィドルリンク –

+0

を提供してくださいリンク与えますdivのボタンに合うように選択メニューの大きさが小さければ、整列させることができます。それがうまくいかない場合は、displyを追加します：divにフレックスします。 – Shubhranshu

答えて

3

ブートストラップのinput-groupを活用し、input-group-addonクラスすることができます。次に、内部のボタンを処理するためにスタイリングを更新するだけです。

enter image description here

HTML

<form class="form-horizontal" role="form" method="POST" action="http://host/lead"> 
    <!-- Contacts --> 
    <div class="form-group"> 
     <label for="contact_id" class="col-md-2 control-label">Contact</label> 
     <div class="col-md-8"> 
      <div class="input-group"> 
       <select name="contact_id" id="contacts-select" class="form-control" title=""> 
        <option value="1"> 
         Eugene van der Merwe</option> 
        <option value="2"> 
         Person B</option> 
        <option value="3"> 
         Person C</option> 
       </select> 
       <div class="input-group-addon input-group-button"> 
        <button type="button" id="show-contact-modal-button" class="btn btn-primary">Add contact</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- // Contacts --> 
    <!-- // Referrer --> 
    <div class="form-group"> 
     <div class="col-md-8 col-md-offset-2"> 
      <button type="submit" class="btn btn-primary"> 
       Create 
      </button> 
     </div> 
    </div> 
</form>

CSS

.input-group-button { 
    padding: 0 0 0 5px; 
    border-color: transparent; 
    background: none; 
}

JSFIDDLE

PS。あなたはReferrerをtext-rightボタンの中に入れているようです。あなたの選択要素。この文句を言わない仕事は、あなたが優先されますwebkitsデフォルトborder-radiusを「オフ」にする必要があります、

更新

あなたのボタンは、より選択し、「接続」を感じるしたい場合を更新する必要があります.input-group .form-controlさんborder-radiusが、その後のような何かを行うことができます：

enter image description here

CSS

.input-group-button { 
    padding: 0; 
    border:none; 
    background: none; 
} 
.input-group .input-group-button:first-child .btn{ 
    border-top-right-radius:0; 
    border-bottom-right-radius:0; 
} 
.input-group .input-group-button:last-child .btn{ 
    border-top-left-radius:0; 
    border-bottom-left-radius:0; 
} 
.input-group select.form-control{ 
    -webkit-appearance: none; 
}

Updated JS Fiddle

注：これは、ブラウザが "矢" を追加削除しますので、あなたがしているものではないかもしれない後

出典

2017-01-26 06:33:23 haxxxton

+0

信じられないほど詳細な返信をありがとうございます。私は短いと甘いので、あなたの最初のオプションを使用して行くと、私は今の矢印が便利だろうと思う。私がselect2に移動すると、スタイリングは変わります。 解決策1の唯一の厄介なことは、ドロップダウンの高さがボタンの高さよりも小さいピクセルなので、ボタンが少し下に垂れ下がるように見えることです。それにもかかわらず、私は本当に簡単な解決策が必要です。 –

1 
<div class="form-group"> 
    <label for="contact_id" class="col-md-2 control-label"> Contact</label> 

    <div class="col-md-8"> 
     <div class="col-md-6"> 
      <select name="contact_id" id="contacts-select" class="form-control" title=""> 
       <option value="1" 
        > 
        Eugene van der Merwe 
       </option> 
       <option value="2" 
        > 
        Person B 
       </option> 
       <option value="3" 
        > 
        Person C 
       </option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <button type="button" id="show-contact-modal-button" class="btn btn-primary"> 
       Add contact 
      </button> 
     </div> 
    </div> 
</div> 
<!-- // Contacts --> 

<!--Referrer --> 
<div class="form-group"> 
    <label for="referrer_id" class="col-md-2 control-label"> Referrer</label> 

    <div class="col-md-8"> 
     <div class="col-md-6"> 
      <select name="referrer_id" id="referrers-select" class="form-control" title=""> 
       <option value="1" 
        > Eugene van der Merwe 
       </option> 
       <option value="2" 
        > Person B 
       </option> 
       <option value="3" 
        > Person C 
       </option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <button id="show-referrer-modal-button" class="btn btn-primary"> 
       Add referrer 
      </button> 
     </div> 


    </div> 
</div> 
<!-- // Referrer --> 
<div class="form-group"> 
    <div class="col-md-8 col-md-offset-2"> 
     <button type="submit" class="btn btn-primary"> 
      Create 
     </button> 
    </div> 
</div> 
</form >

私はdiv要素の鞍部で選択入れます-md-6とcol-md-6のdivのボタン

https://jsfiddle.net/walidazouzi/a0s6bjaL/

出典

2017-01-26 06:39:05

0 
<!-- Contacts --> 
<div class="form-group"> 
<label for="contact_id" class="col-md-2 control-label">Contact</label> 
<div class="col-md-8"> 
<ul class="nav nav-pills"> 
<li> 
    <select name="contact_id" id="contacts-select" class="form-control" title=""> 
         <option value="1" 
          > 
       Eugene van der Merwe</option> 
         <option value="2" 
          > 
       Person B</option> 
         <option value="3" 
          > 
       Person C</option> 
       </select> 
</li> 
<li> 
    <button type="button" id="show-contact-modal-button" class="btn btn-primary"> 
     Add contact 
    </button> 
</li> 
</ul> 
     </div> 
</div> 
<!-- // Contacts -->

このコードはブートストラップ4にあります。これらのコードを試してください。

  • 。

    出典

    2017-01-26 06:56:37

    0 
    <!-- try this --> 
<!-- =========================================================== --> 
<form class="form-horizontal" role="form" method="POST" action="http://host/lead"> 
<!-- Contacts --> 
<div class="form-group"> 
    <label for="contact_id" class="col-md-2 control-label">Contact</label> 
    <div class="col-md-8"> 
     <select name="contact_id" id="contacts-select" class="form control" title=""> 
<option value="1"> 
    Eugene van der Merwe 
</option> 
<option value="2"> 
    Person B 
</option> 
<option value="3"> 
    Person C 
</option> 
</select> 
</div> 
<div> 
<button type="button" id="show-contact-modal-button" class="btn btn-primary"> 
Add contact 
</button> 
</div> 
</div> 
<!-- // Contacts --> 

<!-- Referrer --> 
<div class="form-group"> 
    <label for="referrer_id" class="col-md-2 control-label">Referrer</label> 
    <div class="col-md-8"> 
     <select name="referrer_id" id="referrers-select" class="form-control" title=""> 
     <option value="1">Eugene van der Merwe</option> 
     <option value="2">Person B</option> 
     <option value="3">Person C</option> 
     </select> 
    </div> 
    <div class="col-md-2"> 
    <button type="submit" class="btn btn-primary"> 
     Create 
    </button> 
    </div> 
</div> 
</form> 
</div> 
</div>

    出典

    2017-01-26 07:15:05 BBC

    関連する問題

     関連する問題