Bootstrap 浮动
(1)浮动
pull-left
pull-right
(2)清除浮动
clearfix
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="pull-left bg-info">div</div> <div class="pull-right bg-info">div</div> <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div> <div class="pull-left bg-info">div2-left</div> <div class="pull-right bg-info">div2</div> <div class="center-block" style="width:150px;background-color:#ccc;">该 div2 显示在中间</div> <div class="bg-success text-center" style="width: 100px;display: block;margin: auto;">123456</div> </div> </div> </div> </body> </html>
未添加清除浮动
<!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"> <div class="pull-left" style="background:#58D3F7;"> 向左快速浮动 </div> <div class="pull-right" style="background: #DA81F5;"> 向右快速浮动 </div> </div> </div> </body> </html>
添加清除浮动