在同一行上对齐引导面板标题上的按钮和徽章

如何在引导面板的同一行上获取按钮和引导徽章？我还需要“选定的行”文本并将徽章在面板上右移。在同一行上对齐引导面板标题上的按钮和徽章

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

在同一行上对齐引导面板标题上的按钮和徽章

回答

相关问题