我正在使用 bootstrap 制作一个面板,但遇到了一个问题
现在是面板(jsFiddle):
一切都正确定位但图标有点小所以我将以下 css 规则添加到图标元素:
.t-22{
font-size:22px;
}
但是,在执行此操作后,我的布局发生了变化,最后一个输入组被拉到了右边,如下所示:
css 之后的面板 ( jsFiddle )
为什么当我放大图标时我的最后一个元素被拉到右边,即使看起来有足够的空间容纳更大的图标?
如何在不弄乱布局的情况下将图标设为 22px?
最佳答案
您需要更改图标的行高,它位于 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>
关于html - 增加图标大小会破坏大屏幕上的 Bootstrap 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33376730/