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

Question

我正在使用引导程序制作一个面板，但遇到了问题

这是现在的面板 (jsFiddle)：

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

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

但是，在这样做之后，我的布局会发生变化，最后一个输入组会像这样被拉到右边：

css 后面的面板 (jsFiddle)

为什么当我将图标变大时，我的最后一个元素会被拉到右边，尽管看起来更大的图标似乎有足够的空间？

我怎样才能使图标大小为 22px 而不会弄乱布局？

Answer 1

你需要改变图标的​​行高，它在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>

Answer 2

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