无论如何使用bootstrap实现下面的列? 我试过但它不会与中心对齐
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/10598/
thankssss
答案 0 :(得分:1)
以下是所有浏览器都支持的解决方案:
<div class="container">
<div class="row row1">
<div class="col-md-3"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
</div>
<div class="row row2">
<div class="col-md-3 col-md-offset-1">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
</div>
</div>
&#13;
pull-left
&#13;
或
你可以像这样使用bootstrap的/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
width:400px;
margin: 10px;
}
.row2 {margin-left:30px !important; margin-top:5px;}
类:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3 pull-left"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3 pull-left"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3 pull-left"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
<div class="col-md-3 pull-left"><img src="http://s29.postimg.org/l2d2eyolf/box.jpg"></div>
</div>
<div class="row row2">
<div class="col-md-3 pull-left col-md-offset-1">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3 pull-left">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
<div class="col-md-3 pull-left">
<img src="http://s29.postimg.org/l2d2eyolf/box.jpg">
</div>
</div>
</div>
&#13;
let now = NSDate()
var lastMonday:NSDate?
var nextMonday:NSDate?
var start:NSDate?
var interval:NSTimeInterval = 0 // holds the length of a week. can differ for Daylight Saving Time
let cal = NSCalendar(calendarIdentifier: NSCalendarIdentifierGregorian)! // have a own calendar object for this calculation to guarantee that the next line does not influence other calculations
cal.firstWeekday = 2 // make sure first day of week is Monday.
cal.rangeOfUnit(NSCalendarUnit.CalendarUnitWeekOfMonth, startDate: &lastMonday, interval:&interval, forDate: now) // monday of current week
nextMonday = lastMonday?.dateByAddingTimeInterval(interval) // add a weeks length to the last weeks's monday
println(nextMonday)
&#13;