框之間的引導空白
[英]Bootstrap white space between boxes
問題描述
我是引導程序的新手，試圖提高我的技能，我只是被卡住了，我有 6 個盒子，三個左側和三個右側，我的問題是為什么當我“時”盒子編號“4”和“5”之間有空格m 在 'sm, md,lg' 尺寸上？ 如何在沒有空格的情況下將第 5 號框放在第 4 號框下？ 有沒有帶走那些“空白”並仍然使這項工作像這樣？
<!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>
如何在Bootstrap中的內容框之間添加空格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.