我正在尝试获得5列全宽布局,但我找不到符合我需求的解决方案
这是我使用的代码
<!-- Content Section --> <div class="container"> <div class="row"> <div class="col-lg-12" style="border: 1px solid red"> <div class="row"> <div class="col-xs-12"> <div class="col-xs-2 col-xs-offset-1" id="p1">One</div> <div class="col-xs-2" id="p2">Two</div> <div class="col-xs-2" id="p3">Three</div> <div class="col-xs-2" id="p4">Four</div> <div class="col-xs-2" id="p5">Five</div> </div> <!-- //col-lg-12 --> </div> <!-- //row --> lorem </div> </div> <!-- //col-lg-12 --> </div> <!-- //row --> </div> <!-- //container -->
解决方法
.col-xs-2{ background:#00f; color:#FFF; } .col-half-offset{ margin-left:4.166666667% }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row" style="border: 1px solid red"> <div class="col-xs-2" id="p1">One</div> <div class="col-xs-2 col-half-offset" id="p2">Two</div> <div class="col-xs-2 col-half-offset" id="p3">Three</div> <div class="col-xs-2 col-half-offset" id="p4">Four</div> <div class="col-xs-2 col-half-offset" id="p5">Five</div> <div>lorem</div> </div> </div>
这应该没问题。