带输入组的引导面板 [英] Bootstrap Panel with Input group

问题描述

我想要做的是有一个引导面板，它的左侧有一个按钮，右侧有一个按钮.有点像输入组，我希望这是有道理的.

请原谅我的绘画技巧，但我想我会附上一个例子来说明我的意思.

面板可能不是最好用的东西，所以如果有任何其他建议，请随时告诉我.

谢谢

解决方案

好的，感谢您的所有意见，我想我已经找到了解决方案

这里是 CSS

.panel.panel-horizo​​ntal {显示:表；宽度:100%；}.panel.panel-水平>.panel-heading, .panel.panel-horizo​​ntal >.panel-body, .panel.panel-horizo​​ntal >.面板页脚{显示:表格单元格；}.panel.panel-水平>.panel-heading, .panel.panel-horizo​​ntal >.面板页脚{边框:0；垂直对齐:中间；}.panel.panel-水平>.面板标题{右边框:1px 实心 #ddd;边框右上角半径:0；边框左下角半径:4px；}.panel.panel-水平>.面板页脚{左边框:1px 实心 #ddd;边框左上角半径:0；边框右下角半径:4px；}

这里是 HTML

<div class="panel-heading"><button class="btn btn-success" type="button"><span class="fa fa-check"></span></button>
<div class="panel-body">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Atque saepe iusto nulla moestias quis esse incidunt veritatis exercitationem dolore officiis.Nam quos iusto officiis ullam itaque voluptatum fuga假设的过错！</div><div class="panel-footer"><button class="btn btn-danger" type="button"><span class="fa fa-flag"></span></button>

我可以通过将页眉和页脚设为纯色来进一步改进这一点.

What I am trying to do is have a bootstrap panel which has a button on the left side of it and a button on the right side of it. A bit like a input group, I hope this makes sense.

Excuse my paint skills but I thought I would attach an example of what I meant.

A panel may not be the best thing to use, so if there are any other suggestions feel free to let me know.

Thanks

解决方案

Ok thanks for all your input I think I have found a solution to what I am after

Here is the CSS

.panel.panel-horizontal {
        display: table;
        width: 100%;
    }

        .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-body, .panel.panel-horizontal > .panel-footer {
            display: table-cell;
        }

        .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer {
            border: 0;
            vertical-align: middle;
        }

        .panel.panel-horizontal > .panel-heading {
            border-right: 1px solid #ddd;
            border-top-right-radius: 0;
            border-bottom-left-radius: 4px;
        }

        .panel.panel-horizontal > .panel-footer {
            border-left: 1px solid #ddd;
            border-top-left-radius: 0;
            border-bottom-right-radius: 4px;
        }

And here is the HTML

<div class="panel panel-default panel-horizontal">
            <div class="panel-heading">
                <button class="btn btn-success" type="button"><span class="fa fa-check"></span></button>
            </div>
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque saepe iusto nulla molestias quis esse incidunt veritatis exercitationem dolore officiis. Nam quos iusto officiis ullam itaque voluptatum fuga assumenda culpa!</div>
            <div class="panel-footer">
                <button class="btn btn-danger" type="button"><span class="fa fa-flag"></span></button>
            </div>
        </div>

I can improve this a bit further by having the header and footer to be solid colours.

这篇关于带输入组的引导面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！