带有SELECT和同一行图标的Bootstrap

时间:2014-10-07 18:47:17

标签: html css

我正在尝试将这些控件放在同一级别上。我想让保存按钮底部与元素对齐。

enter image description here

  <div class="row">
        <div class="col-sm-8">
          <div class="form-group">
            @Html.LabelFor(f => f.DatabaseName, "Database Name")
            @Html.DropDownListFor(f => f.DatabaseName, ViewBag.DatabaseList as IEnumerable<SelectListItem>, new { @class = "dbs form-control", style = "margin-bottom:20px" })
            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>

2 个答案:

答案 0 :(得分:2)

看看:http://www.bootply.com/yHUeAcHaRX

<div class="col-md-6">
    <div class="input-group">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
        </select>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-save"></i>Save</button>
        </span>
    </div>
</div>

答案 1 :(得分:0)

 <div class="row">
        <div class="col-sm-8">
<div class="col-sm-4">
          <div class="form-group">

            <span class="glyphicon glyphicon-save"></span> Save
          </div>
          </div>
</div>
          <div class="col-sm-4">
            <div class="form-group">
              <span class="glyphicon glyphicon-save"></span> Save
            </div>
          </div>
        </div>
</div>