bootstrap pagination control's alignment to be the same
Question
I am creating bootstrap pager using below code.
<style>
.navigation-bar .pagination {
margin-top: 0;
}
</style>
<div class="navigation-bar">
<span class="pull-left"><strong>Total record(s) 1000</strong></span>
<ul class="pagination pull-right">
<li>
<a href="#"><span class="glyphicon glyphicon-search"></span> Search</a>
</li>
<li>
<!--<a style="padding: 0; margin: 0; margin-top: 0; border-spacing: 0; border-collapse: collapse;"><div ddl-record-filter-count>Filter By</div></a>-->
<a style="padding: 6px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-backward"></span> First</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-backward"></span> Previous</a>
</li>
<li>
<a href="#"><span></span> 1</a>
</li>
<li>
<a href="#"><span></span> 2</a>
</li>
<li>
<a href="#"><span></span> 3</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-forward"></span> Next</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-forward"></span> Last</a>
</li>
</ul>
Problem is drop-down control is not in the same height with others.
Please let me get your suggestion.
To see detail of my problem , please use chrome and zoom to 110%
1 answers
solution1
0 2015-12-03 09:34:07
used to this style
.pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;}
Demo
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> .navigation-bar .pagination { margin-top: 0; } .pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;} </style> </head> <body> <div class="navigation-bar"> <span class="pull-left"><strong>Total record(s) 1000</strong></span> <ul class="pagination pull-right"> <li> <a href="#"><span class="glyphicon glyphicon-search"></span> Search</a> </li> <li> <!--<a style="padding: 0; margin: 0; margin-top: 0; border-spacing: 0; border-collapse: collapse;"><div ddl-record-filter-count>Filter By</div></a>--> <a style="padding: 0px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a> </li> <li> <a href="#"><span class="glyphicon glyphicon-fast-backward"></span> First</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-backward"></span> Previous</a> </li> <li> <a href="#"><span></span> 1</a> </li> <li> <a href="#"><span></span> 2</a> </li> <li> <a href="#"><span></span> 3</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-forward"></span> Next</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-fast-forward"></span> Last</a> </li> </ul> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap alignment of button and pagination
Bootstrap control alignment
Alignment left on top and bottom in same div with bootstrap?
Bootstrap 3 Alignment
How to have same alignment of DIV's in an iFrame?
How to change the color of bootstrap's pagination
How to force two element alignment in the same line bootstrap model
Vertical-alignment text in Bootstrap's List Group
How To: Control WHEN a bootstrap 3 'control-label' changes from right to left alignment
Bootstrap alignment - nav header alignment
Related Tags