如何将<span>和<button>放在同一行

Question

这就是它的样子：

和我的HTML：

new JavaScriptSerializer().Serialize(  
    (from p   
    in (new List<Person>() {  
        new Person()  
        {  
            Age = 35,  
            Gender = Gender.Male  
        }  
    })  
    select new { Age =p.Age, Gender=p.Gender.ToString() }  
    ).ToArray()[0]  
);

我想把仓库和仓库放在同一条线上，怎么做？

Answer 1

您需要将周围的div设为输入组（添加“input-group”类）：

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

而不是：

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

您可能需要查看输入组/输入组附加组件文档： http://v4-alpha.getbootstrap.com/components/input-group/

Answer 2

您还需要为范围指定display:inline以覆盖其上display: table-cell;类的.input-group-addon。

See this bootply fiddle

Answer 3

（糟糕的练习警告）

要使完全你的要求，你可以使用这种风格

<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

也可以这样。

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