如何让 bootstrap 标签填满 kendoToolbar 的剩余区域？

Question

我有一个 kendoToolbar，其中有 3 个 button 和一个 label，最后我可能会在其中添加另一个 button 或下拉菜单用于导出网格数据，无论如何..

我想知道如何让 bootstrap label 填满工具栏的剩余区域。原因是当用户导航到这个网格时，我希望他们知道他们在哪里。

现在看起来像这样：

这就是我想要的样子

现在我的代码如下所示：

$("#customerToolbar").kendoToolBar({
    items: [
    {
        template: "&nbsp<button type='button' id='AddRecord' onClick='CustomerPopupEditor()' class='btn btn-primary'><span class='glyphicon glyphicon-plus'></span> Add</button> &nbsp"
    },
    {
        template: "<button type='button' id='edit' class='btn btn-warning myEdit'><span class='glyphicon glyphicon-edit'></span> Edit</button> &nbsp"
    },
    {
        template: "<button type='button' id='delete' class='btn btn-danger myDelete'><span class='glyphicon glyphicon-remove'></span> Delete</button>"
    },
    {
        template: "<div class='label label-success'>Customers</div>"
    }
    ]
});

这里是dojo

编辑

它不一定需要是 label 来填充工具栏剩余的 space，它可以是任何能产生与我想要的类似效果的东西长得像。

Answer 1

使用flexbox你可以做到这一点。

切换全页查看结果。

注意： 我在 CSS 中使用了 body 来覆盖已经使用的 CSS，而不使用 !important。

/*CSS changes*/

body .k-toolbar {
  display: flex;
}
body .k-toolbar .k-button,
body .k-toolbar > * {
  display: flex;
  margin: 0 1%;
}
body .k-toolbar-last-visible {
  flex: 1;
  align-items: center;
}
body .label {
  flex: 1;
  padding: 1.5em
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="customerToolbar">
</div>
<!-- Script -->
<script>
  $("#customerToolbar").kendoToolBar({
    items: [{
      template: "&nbsp<button type='button' id='AddRecord' onClick='CustomerPopupEditor()' class='btn btn-primary'><span class='glyphicon glyphicon-plus'></span> Add</button> &nbsp"
    }, {
      template: "<button type='button' id='edit' class='btn btn-warning myEdit'><span class='glyphicon glyphicon-edit'></span> Edit</button> &nbsp"
    }, {
      template: "<button type='button' id='delete' class='btn btn-danger myDelete'><span class='glyphicon glyphicon-remove'></span> Delete</button>"
    }, {
      template: "<div class='label label-success'>Customers</div>"
    }]
  });
</script>

如何让 bootstrap 标签填满 kendoToolbar 的剩余区域？

How to get bootstrap label to fill up remaining area of kendoToolbar?

css

twitter-bootstrap

kendo-ui

twitter-bootstrap-3

kendo-template