Question

我正在尝试使.input-group中的按钮对齐（占用可用的全宽）。我似乎无法做对。

代码：

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">@Html.LabelFor(Function(m) m.PageData.GenderID, htmlAttributes:=New With {.class = "control-label"})
        </span>
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <div class="input-group-btn input-group-justified">
                <label class="btn btn-default @(If(0=Model.PageData.GenderID,"active",string.empty))">
                    @Html.RadioButton("PageData.GenderID", 0, (0 = Model.PageData.GenderID), htmlAttributes:=New With {.id = "gender_none"})
                    Undisclosed
                </label>
                <label class="btn btn-default @(If(1=Model.PageData.GenderID,"active",string.empty))">
                    @Html.RadioButton("PageData.GenderID", 1, (1 = Model.PageData.GenderID), htmlAttributes:=New With {.id = "gender_female"})
                    Female
                </label>
                <label class="btn btn-default @(If(2=Model.PageData.GenderID,"active",string.empty))">
                    @Html.RadioButton("PageData.GenderID", 2, (2 = Model.PageData.GenderID), htmlAttributes:=New With {.id = "gender_male"})
                    Male
                </label>
            </div>
        </div>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" data-toggle="popover" data-for="@Html.IdFor(Function(m) m.PageData.GenderID)">
            <span class="glyphicon glyphicon-question-sign"></span></button>
        </span>
    </div>
</div>

如图所示，这会产生间隙。 bad gap

我想要什么

我希望差距消失，3个性别按钮填补标签和问号按钮之间的空间。

或者，性别标签可以大到足以将3个按钮拉过来......但是简单地设置宽度似乎不对..性别按钮组之间显然有某种脱节。结束问题。

我不知道我哪里错了。任何帮助表示赞赏。

Answer 1

我在代码中添加了两个类，其样式如下。

Working Demo

<强> CSS

.form-group .dtable {
  display:table; 
  width: 100%;
  }

.tbcell {
   display:table-cell; 
    width:1%;
  }

<强> HTML

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">@Html.
        </span>
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <div class="input-group-btn input-group-justified dtable">
                <label class="btn btn-default tbcell @(If(0=Model.PageData.GenderID," active",string.empty))"="">
                    @Html.
                    Undisclosed
                </label>
                <label class="btn btn-default tbcell @(If(1=Model.PageData.GenderID," active",string.empty))"="">
                    @Html.
                    Female
                </label>
                <label class="btn btn-default tbcell @(If(2=Model.PageData.GenderID," active",string.empty))"="">
                    @Html.
                    Male
                </label>
            </div>
        </div>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" data-toggle="popover" data-for="@Html.IdFor(Function(m) m.PageData.GenderID)">
            <span class="glyphicon glyphicon-question-sign"></span></button>
        </span>
    </div>
</div>

Answer 2

您可以通过在页面标题中添加以下CSS代码轻松实现此目的。

<style>
.input-group {width:100%; display:table !important;}
.input-group .input-group-addon {display:table-cell; width:100px;}
.input-group .btn-group  {display:table-cell;}
.input-group .btn-group .input-group-justified {display:table; width:100%;}
.input-group .btn-group .input-group-justified .btn {display:table-cell; width:30%}
.input-group .input-group-btn {display:table-cell;}
</style>

如何消除元素之间的这种差距？

代码：

我想要什么

2 个答案: