如何使用引导程序美化 html？ [关闭]答案

【问题标题】：How to beautify html using bootstrap? [closed]如何使用引导程序美化 html？ [关闭]
【发布时间】：2018-09-12 17:45:05
【问题描述】：

我在我的项目中使用 bootstrap 3。

我的屏幕宽度是 341 像素。

这里是html代码：

    <div class="panel panel-default margin-bottom-10">
        <div class="panel-heading nopadding ">
            <div class="row">
                <div class="container">
                    <div class="panel-title pull-left">
                        <i class="ico-dark ico-rounded ico-hover ico-xs et-layers"></i>
                        select:
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body padding-6">
            <div class="input-group">
                <div class="input-group-addon" id="basic-addon1">group</div>
                <select id="projectGroup" class="form-control fullwidth height-30">
                    <asp:Literal ID="litProjectGroupsOptions" runat="server" />
                </select>
            </div>

            <div class="form-group row">

                <div class="col-xs-9">
                    <div class="input-group">
                        <div class="input-group-addon" id="basic-addon2">Layer</div>
                        <select id="projectLayers" class="form-control fullwidth height-30">
                            <option value="0">All Layers</option>
                        </select>
                    </div>
                </div>

                <div class="col-xs-3">

                    <button type="button" class="btn btn-default btn-sm" id="editLayer" title="הצג גנט" data-toggle="tooltip">
                        <i class="glyphicon glyphicon-edit" id=""></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

它的外观如下：

这里是JSFIDDLE。

我要美化视野：

知道如何美化视图吗？

【问题讨论】：

“美化”是什么意思？你试过什么？
bootstrap 的第一个目标是将您的网站缩放到许多不同的屏幕宽度。要求我们让它在 341 像素宽度的屏幕上工作与此相反。但是，您需要做的就是在元素之间放置一点垂直空间，这应该不难做到。

标签： css twitter-bootstrap-3

【解决方案1】：

您不应为此布局使用row 和col-*。 Bootstrap 3 支持在输入的开头或结尾带有附加按钮或标签的输入组组件：

附加按钮：

<div class="input-group-btn">

附加标签：

<span class="input-group-addon">

在此处查看输入组组件示例：https://jsfiddle.net/DTcHh/90437/

希望这会有所帮助。

【讨论】：