Wie bekomme ich ein Bootstrap-Label, um den verbleibenden Bereich von kendoToolbar aufzufüllen?

Question

ich eine kendoToolbar mit 3 button s in ihm und einem label, stehen die Chancen am Ende sind werde ich jedenfalls für den Export der Rasterdaten in ihm einen weiteren button oder ein Dropdown-Menü Hinzufügen am Ende ..

Ich war frage mich, wie ich den Bootstrap label den restlichen Bereich der Symbolleiste füllen kann. Grund ist, weil, wenn ein Benutzer zu diesem Gitter navigiert, ich möchte, dass sie wissen, wo sie sind.

Im Moment sieht es wie folgt aus:

Und das ist, wie ich es bin zu wollen, wie dies mein Code sieht aussehen

Gerade jetzt:

$("#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>" 
    } 
    ] 
}); 

und hier ist dojo

EDIT

Es muss nicht unbedingt ein label entweder zu füllen den verbleibenden Platz in der Symbolleiste sein, es kann alles sein, was den gleichen Effekt geben, was ich will aussehen.

Answer 1

Mit flexbox können Sie dies erreichen.

Ganzseite umschalten, um das Ergebnis zu sehen.

HINWEIS: habe ich body in CSS die bereits verwendet CSSs ohne !important mit außer Kraft zu setzen.

/*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>