如何使用引导程序美化html？

Question

我在项目中使用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。

我想美化视图：

有什么想法可以美化视图吗？

Answer 1

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

对于附加按钮：

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

对于附加标签​​：

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

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

希望这会有所帮助。