So richten Sie eine Bootstrap-Schaltfläche rechts neben einer Auswahloption in einem Bootstrap-Bedienfeld aus

Ich möchte die Bootstrap-Schaltfläche nach rechts ausrichten, wie im Diagramm dargestellt. Bitte beachten Sie, dass ich Bootstrap-Panels verwende und form-horizontal: So richten Sie eine Bootstrap-Schaltfläche rechts neben einer Auswahloption in einem Bootstrap-Bedienfeld aus

Standardmäßig sind die Schaltflächen unterhalb der Optionen gesetzt. was ich habe versucht:

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

Dies richtet auf der rechten Seite auf den Button, aber immer noch unter dem Dropdown-Menü.

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

Dies beseitigt tatsächlich vollständig den Knopf :-)

Hier ist die vollständigere 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>

Quelle

2017-01-26 Eugene van der Merwe

gib mir Link, wo Sie diese hinzufügen oder eine Live-Demo zeigen –

bitte Geige Link liefern –

Col-md-8 gibt eine Breite, die die div, die vollständig durch das Auswahlmenü genommen wird .. Wenn u die Breite reduzieren Auswahlmenü klein genug, um die Schaltfläche in der Div passen dann kann es ausrichten .. Wenn es nicht funktioniert, dann fügen Sie disply: flex zum div. – Shubhranshu

können Sie nutzen Bootstrap des input-group und input-group-addon Klassen. Dann müssen wir nur das Styling aktualisieren, um eine Taste im Inneren zu handhaben.

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. Sie scheinen den Referrer text-right Button INSIDE Ihr Select-Element platziert zu haben.Das wird nicht funktionieren, und sollte

aktualisieren

aktualisiert Wenn Sie Ihren Knopf würde gerne mehr „angebracht“, um die Auswahl fühlen, werden Sie müssen „deaktivieren“ webkits Standard border-radius, die überschreibt .input-group .form-control ‚s border-radius, aber dann kann so etwas tun:

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

Hinweis: Dies entfernt die Browser "Pfeile" hinzugefügt, so kann nicht sein, was Sie nach

Quelle

2017-01-26 06:33:23 haxxxton

Vielen Dank für die unglaublich detaillierte Antwort. Ich gehe mit Ihrer ersten Option, weil es kurz und süß ist und ich denke, dass die Pfeile im Moment nützlich sein werden. Das Styling wird sich sowieso ändern, wenn ich zu select2 gehe. Die einzige nervige Sache mit Lösung 1 ist, dass die Drop-Down-Höhe etwa ein Pixel kleiner ist als die Button-Höhe, so dass der Button so aussieht, als ob er leicht nach unten hängt. Trotzdem brauche ich eine wirklich einfache Lösung und Ihre Antwort ist es. –

<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 >

i wählen setzen in div col -md-6 und der Knopf in Div mit Col-MD-6

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

Quelle

2017-01-26 06:39:05

<!-- 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 -->

Ich habe diesen Code in Bootstrap 4 gefunden. Bitte versuchen Sie diesen Code.

Quelle

2017-01-26 06:56:37

<!-- 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>

Quelle

2017-01-26 07:15:05 BBC

So richten Sie eine Bootstrap-Schaltfläche rechts neben einer Auswahloption in einem Bootstrap-Bedienfeld aus

Antwort

Verwandte Themen