0

我有这个 html 代码，我正在尝试将一些按钮与第一个输入组部分对齐。！见附图。

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label>Phone</label>
            <div class="input-group">
                <select class="form-control input-xs" name="selectbasic" id="selectbasic1">
                    <option>Option one</option>
                    <option>Option two</option>
                </select>
                <span class="input-group-btn"> 
                    <a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a> 
                    <a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a> 
                    <a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a> 
                    <a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
            <a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
        </div>
    </div>
</div>

错误的渲染：在此处输入图像描述

如何将第二个和第三个 col-md- 的按钮与第一个 col-md- 对齐？问题是第一个 col-md- 部分有一个带有标签的选择...

4

2 回答 2

1

你把它复杂化了。如果您希望它们与其他按钮保持一致，那么它们应该与您的其他按钮在同一组 col 中，然后只需使用一些填充魔法使它们彼此分开。http://bootply.com/83379是一个工作示例。下面的代码：

CSS

.input-group-btn:nth-of-type(2) {
  padding:0 20px;
}

HTML

<div class="row">
<div class="col-md-6">
    <div class="form-group">
        <label>Phone</label>
        <div class="input-group">
            <select class="form-control input-xs" name="selectbasic" id="selectbasic1">
                <option>Option one</option>
                <option>Option two</option>
            </select>
            <span class="input-group-btn"> 
                <a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a> 
                <a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a> 
                <a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a> 
                <a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
          </span>
          <span class="input-group-btn"> 
              <a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
              <a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
          </span>
          <a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
        </div>
    </div>
</div>
</div>

更新：IE8 支持

IE8 的支持nth-of-type显然是可疑的，所以如果你想确保支持，我们可以将该 CSS 规则更改为一个类，然后将其添加到<span>其中的两个按钮。

CSS

.input-group-btn-padding {
  padding:0 20px;
}

有关工作示例，请参见http://bootply.com/83596 。

于 2013-09-26T14:38:49.093 回答
0

您不能在表单组中使用带有 margin-top 的额外类吗？

于 2013-09-26T14:47:33.560 回答