有关 spacing实用程序的更多信息,请参见我的其他答案.I'm using Bootstrap v. 4 for the first time.I have a footer that is using the new flex col's and it works great on desktop. But when I switch to mobile they're stacked so closely to each other there is no vertical margin / padding.Is this the normal behavior?Also, I would prefer the content is centered or at least have some offset. But using offset results in top padding instead of left or right offset.Is that normal behavior?If so, what would be the recommended, "official", approach to adding top margin/padding on mobile only and offset?Thank you!Without Offset:<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"><div class="row" id="kpc-row-10"> <div class="container"> <div class="row"> <div class="col-sm"> </div> <div class="col-sm"> </div> <div class="col-sm"> </div> <div class="col-sm"> </div> </div> </div></div>With Offset:<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"><div class="row" id="kpc-row-10"> <div class="container"> <div class="row"> <div class="col-sm offset-sm-2"> </div> <div class="col-sm offset-sm-2"> </div> <div class="col-sm offset-sm-2"> </div> <div class="col-sm offset-sm-2"> </div> </div> </div></div> 解决方案 As already mentioned in the comments, and in other questions, there is no vertical spacing between columns in Bootstrap. However, Bootstrap 4 has spacing utility classes you can utilize to adjust the margins or padding...For example my-3 will add a top and bottom (y-axis) margin to each column.<div class="container"> <div class="row"> <div class="col-sm my-3"> </div> <div class="col-sm my-3"> </div> <div class="col-sm my-3"> </div> <div class="col-sm my-3"> </div> </div></div>Demo: http://www.codeply.com/go/ABUaBgCNbESee my other answer for more info on the spacing utilities. 这篇关于Bootstrap 4网格系统中的`col`上的填充是否正常?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 03:45
查看更多