增加图标大小会破坏大屏幕上的 bootstrap 布局

Question

我正在用 bootstrap 制作一个面板，运行遇到了问题

这是现在的面板 (jsFiddle):

一切都正确定位但图标有点小所以我将以下 css 规则添加到图标元素：

.t-22{
    font-size:22px;
}

但是，在执行此操作后，我的布局发生了变化，最后一个输入组被拉到了右边，如下所示：

css (jsFiddle)

之后的面板

为什么当我把图标变大时，我的最后一个元素被拉到右边，即使看起来有足够的空间容纳更大的图标？

如何在不弄乱布局的情况下使图标大小为 22px？

Answer 1

我有一个宽屏幕，这就是它的外观。即使我降低视口，它仍能正确显示元素。

Answer 2

您需要更改图标的行高，它位于 line-height: 31.4286px; 并且您的文字是 line-height: 20px;

查看示例代码段。

.no-wrap-labels label {
    white-space: nowrap !important;
}
.t-22 {
    font-size: 22px;
    line-height: 22px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="content-wrapper">
    <div class="so-cat-top-bar"></div>
    <div class="container  ">
        <div class="panel panel-default">
            <div class="panel-heading"><span class="phone-only">Title</span>

                <div class="panel-icons"></div>
            </div>
            <div class="panel-body" style="min-height:400px;">
                <div class="panel-options"></div>
                <!-- /panel-options-->
                <div class="tab-content no-wrap-labels" id="category-tab-container">
                    <div class="tab-pane active" id="client">
                        <fieldset class="scheduler-border m-t-15">
                            <legend class="scheduler-border ">Start Time <a href="#" data-toggle="tooltip" data-placement="bottom" title="Clone this input group" class="preventDefault clone-icon"><i class="icon ion-social-buffer-outline t-22"></i></a>

                            </legend>
                            <form class="form-horizontal" role="form">
                                <div class="row">
                                    <div class="col-sm-6 col-lg-4 input-container">
                                        <div class="form-group">
                                            <div class="col-md-4  col-lg-5 ">
                                                <label for="inputPassword" class="control-label">Account Number <a href="#" data-toggle="tooltip" data-placement="bottom" title="Clone this input group" class="preventDefault clone-icon m-l-5">
                                                        <i class="icon ion-social-buffer-outline t-22"></i>
                                                    </a>

                                                </label>
                                            </div>
                                            <div class="col-md-8  col-lg-7">
                                                <input type="text" class="form-control" id="inputPassword" value="4458-465-55811">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-4 input-container">
                                        <div class="form-group">
                                            <div class="col-md-4  col-lg-5 ">
                                                <label for="inputPassword" class="control-label"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="Clone this input group" class="preventDefault clone-icon m-r-5">
                                                        <i class="icon ion-social-buffer-outline t-22"></i>
                                                    </a>Account Number</label>
                                            </div>
                                            <div class="col-md-8  col-lg-7">
                                                <input type="text" class="form-control" id="inputPassword" value="4458-465-55811">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-4 input-container">
                                        <div class="form-group">
                                            <div class="col-md-4  col-lg-5 ">
                                                <label for="inputPassword" class="control-label">Account Number</label>
                                            </div>
                                            <div class="col-md-8  col-lg-7">
                                                <input type="text" class="form-control" id="inputPassword" value="4458-465-55811">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-4 input-container">
                                        <div class="form-group">
                                            <div class="col-md-4  col-lg-5 ">
                                                <label for="inputPassword" class="control-label">Account Number <a href="#" data-toggle="tooltip" data-placement="bottom" title="Clone this input group" class="preventDefault clone-icon m-l-5">
                                                        <i class="icon ion-social-buffer-outline t-22"></i>
                                                    </a>

                                                </label>
                                            </div>
                                            <div class="col-md-8  col-lg-7">
                                                <input type="text" class="form-control" id="inputPassword" value="4458-465-55811">
                                            </div>
                                        </div>
                                    </div>
                            </form>
                        </fieldset>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="btn-toolbar pull-right">
                                <div class="btn-group">
                                    <button class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
                                    <button class="btn btn-default">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>

                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /tab content-->
            </div>
            <!-- /panel-body-->
        </div>
        <!-- /panel-default -->
    </div>

增加图标大小会破坏大屏幕上的 bootstrap 布局

Increasing icon size mucks up bootstrap layout on large screens

html

css

icons

twitter-bootstrap

这是现在的面板 (jsFiddle):

css (jsFiddle)