wie <span> und <button> auf der gleichen Linie setzen

Question

hier ist, wie es aussieht:

und meine html:

<div> 
    <div class="dropdown col-md-6"> 
    <span class="input-group-addon" id="basic-addon1" style="width:150px;">warehouse</span> 
    <button class="btn btn-default dropdown-toggle "type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="display:inline;"> 
    select warehouse 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
    </div> 
</div> 

Ich möchte auf das Lager und wählen Sie Lager setzen die gleiche Linie, wie es geht?

Answer 1

Sie benötigen die umliegenden div eine Eingangsgruppe (fügen Sie die "Input-Gruppe" Klasse) zu machen:

<div class="dropdown col-md-6 input-group"> 

Statt:

<div class="dropdown col-md-6"> 

Vielleicht möchten Sie am Eingang sehen Gruppe/Eingabegruppe Add-On Dokumentation: http://v4-alpha.getbootstrap.com/components/input-group/

Answer 2

Sie müssen auch display:inline für den Bereich angeben, um denzu überschreibender .input-group-addon Klasse darauf.

See this bootply fiddle

Answer 3

(schlechte Praxis alert)

Um genau, was Sie fragen, können Sie diesen Stil verwenden können

<span class="input-group-addon" id="basic-addon1" style="display:inline-block; width:auto;float:left;height:35px;line-height:21px;">warehouse</span> 

Answer 4

auch so sein kann.

<div class="form-group form-inline"> 
    <span class="col-md-2 control-label">Metadata</span> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example</button> 
</div>