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

Question

我正在制作一个带引导程序的面板，并遇到了一个问题

这是现在的面板（jsFiddle）：

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

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

然而，在这样做之后，我的布局被移动，最后一个输入组被拉到右边，如下所示：

该小组遇到了css（jsFiddle）

当我将图标放大时，为什么我的最后一个元素会被拉到右边，即使这个较大的图标似乎有足够的空间？

如何在不弄乱布局的情况下制作22px的图标？

Answer 1

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

请参阅示例代码段。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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