twitter-bootstrap – Bootstrap 3将控件添加到面板标题

发布时间：2020-12-18 00:20:00 所属栏目：安全来源：网络整理

导读：期望的结果：有一个包含标题左侧标题的引导带面板和一个带有用于搜索的插件按钮的搜索文本字段.最后一个图标是一个选项/扳手按钮,用于设置一些面板主体选项. 现行代码： div class="container" div class="panel panel-primary" div class="panel-heading c

期望的结果：
有一个包含标题左侧标题的引导带面板和一个带有用于搜索的插件按钮的搜索文本字段.最后一个图标是一个选项/扳手按钮,用于设置一些面板主体选项.

现行代码：

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group pull-right">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

目前的结果：
我希望面板标题在一行上.当我们采用较小的表格尺寸时,我会做一些调整.但是,当前代码导致组件换行到多行.

解决方法

只需摆脱输入组中的.pull-right类.

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

Working Example

更新

如果你想要输入(我给它ID #Special)更小和右对齐,你可以通过CSS做这样的事情：

#Special { 
    width: 200px; 
    float: right;
}

HTML：

<input id="Special" type="text" class="form-control" placeholder="Search">

Updated Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!