在同一行上對齊引導面板標題上的按鈕和徽章

如何在引導面板的同一行上獲取按鈕和引導徽章？我還需要「選定的行」文本並將徽章在面板上右移。在同一行上對齊引導面板標題上的按鈕和徽章

Plunker代碼如下 https://plnkr.co/edit/QNLe7n?p=preview **

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <div> 
      <span style="display: inline-block;vertical-align: middle;" dx-button="addButton"></span> 
      <span style="display: inline-block;vertical-align: middle;" class="pull-right"> 
        <h3>Selected Records: </h3> 
        <span class ="badge badge-default">{{selectedRowCount}}</span> 
      </span> 
     </div> 
    </div> 
</div>

來源

2017-02-17 megan

這裏是你所需要的。請參閱更多詳情Bootstrap Grid System。 Updated Plnkr

angular.module("myApp", ["dx"]); 
 
(function() { 
 
    'use strict'; 
 

 

 
    angular 
 
     .module('myApp') 
 
     .controller('PendingRequestsController', PendingRequestsController); 
 
     
 
    PendingRequestsController.$inject = ['$scope']; 
 

 
    function PendingRequestsController($scope) { 
 
    
 
     $scope.addButton = { 
 
     text: "Add Button", 
 
     icon: "plus", 
 
     type: "success", 
 
     onClick: function(e) {} 
 
     }; 
 
     
 
     $scope.selectedRowCount = 14; 
 

 
    } 
 

 
}());

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script data-require="[email protected]*" src="//code.angularjs.org/1.3.11/angular.js"></script> 
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.min.js"></script> 
 
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script> 
 
    <script type="text/javascript" src="//cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link rel="stylesheet" type="text/css" href="//cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css"> 
 
    <link rel="stylesheet" type="text/css" href="//cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="myapp.module.js"></script> 
 
    <script src="pending.controller.js"></script> 
 

 
</head> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="PendingRequestsController" > 
 
    
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading row"> 
 
      <div class="col-xs-6"> 
 
       <span style="display: inline-block;vertical-align: middle;" dx-button="addButton"></span> 
 
      </div> 
 
      <div class=" col-xs-6 text-right"> 
 
       <h4 style="display: inline-block;vertical-align: middle;"> 
 
         Selected Records:<span class ="badge badge-default">{{selectedRowCount}}</span> 
 
       </h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

希望它能幫助:)

來源

2017-02-17 11:15:38 Manish

感謝馬尼什，這樣沒有問題，在很大程度上，但我看到的問題是，他們沒有在面板的中心。我如何將它們垂直對齊到面板中間的面板 – megan

？沒有得到你。如果你想讓它們在面板中間對齊。那麼爲什麼ypu將它們保留在面板標題中。讓他們在面板身體。內部面板標題，他們垂直對齊中心。如果你可以穿上你想要的佈局圖。我可以幫助你更好。 – Manish

感謝您的回覆Manish。中間爲垂直居中..因此在面板標題中，我希望標題和按鈕在中心垂直對齊。該按鈕必須被拉到右邊。希望這可以讓我清楚我想要做什麼。 – megan

我做的HTML一些變化。請檢查。這裏是更新plunker link

<div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="row"> 
       <div class="col-md-6 col-sm-6 col-xs-6"> 
       <span dx-button="addButton"></span> 
       </div> 
       <div class="col-md-6 col-sm-6 col-xs-6"> 
       <span class="pull-right"> 
         <h3 class="pull-left" style="margin:0">Selected Records: </h3> 
         <span class="badge badge-default ng-binding" style="">14</span> 
       </span> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div>

請檢查並讓我知道如果我能夠幫助你。

來源

2017-02-17 11:18:15

h3 { 
 
    display: inline; 
 
} 
 
.panel { 
 
    float:right; 
 
}

<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
    <div> 
 
     <span style="display: inline-block;vertical-align: middle;" dx-button="addButton"></span> 
 
     <span style="display: inline-block;vertical-align: middle;" class="pull-right"> 
 
        <h3>Selected Records: </h3> 
 
        <span class ="badge badge-default">{{selectedRowCount}}</span> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-17 11:49:59 Parth

我認爲你想實現這一點。 – Parth

在同一行上對齊引導面板標題上的按鈕和徽章

回答

相關問題