bootstrap grid 4列和3列相同的宽度对齐中心

Question

无论如何使用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

Answer 1

以下是所有浏览器都支持的解决方案：

＆＃13;

＆＃13;

<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;

＆＃13;

＆＃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;}类：

＆＃13;

＆＃13;

<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;

＆＃13;

＆＃13;