框之间的引导空白
[英]Bootstrap white space between boxes
问题描述
I'm new on bootstrap trying to improve my skills, i just got stuck, i have 6 boxes, three left side and three right side, my question is why there is space between box number '4' and '5' when i'm on 'sm, md,lg' sizes ?
我是引导程序的新手，试图提高我的技能，我只是被卡住了，我有 6 个盒子，三个左侧和三个右侧，我的问题是为什么当我“时”盒子编号“4”和“5”之间有空格m 在 'sm, md,lg' 尺寸上？ how can i put box number 5 under box number 4 without blank space ?如何在没有空格的情况下将第 5 号框放在第 4 号框下？ and is there away to take away those 'white space' and still make this work like this ?有没有带走那些“空白”并仍然使这项工作像这样？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:30%; height:250px; border: solid black 1px; } .boxx{ width:100px; height:100px; border: solid white 1px; } .bo{ width:50%; height:550px; border: solid black 1px; } * { box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing -moz-box-sizing: border-box; } </style> </head> <body> <body> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="boxx mx-auto"> white space </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 2 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="bo mx-auto"> 3 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 4 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="boxx mx-auto"> white space </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 5 </div> </div> </div> </body> </html> </body> </html>
1 个解决方案
解决方案1
1 2019-03-07 17:00:45
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:30%; height:250px; border: solid black 1px; } .bo{ width:50%; height:550px; border: solid black 1px; } * { box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing -moz-box-sizing: border-box; } </style> </head> <body> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> <div class="box mx-auto"> 2 </div> </div> <div class="col-md-6"> <div class="bo mx-auto"> 3 </div> </div> <div class="col-md-6"> <div class="box mx-auto"> 4 </div> <div class="box mx-auto"> 5 </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在Bootstrap中的内容框之间添加空格 - How to add space between content boxes in Bootstrap
巨无霸和列div之间的空白（bootstrap） - White space between jumbotron and column divs (bootstrap)
幻灯片引导轮播之间的空白 - White space between slides bootstrap carousel
如何在每个列框之间添加空格 - How to add a white space between each column boxes
如何在引导程序中的两个文本框之间留出空间 - How to make space between two text boxes in bootstrap
Bootstrap 侧空白 - Bootstrap side white space
删除空白引导程序 - Removing white space bootstrap
引导程序中的空白标签 - White space tabs in bootstrap
第一和第二个Bootstrap表列之间的大空白 - Large white-space between first and second Bootstrap table column
引导导航药丸之间有额外的空白 - Bootstrap navigation pills have extra white space between them
相关标签