Bootstrap Grid不会从头开始

Question

在过去成功使用Bootstrap网格布局之后，我正在碰壁，并且不明白我做错了什么......

我的目标是创建一个半随机的图片布局，这意味着imgs的偏移量可能因行而不同但我要小心，最后它总是加起来为12所以它应该开始一个新的行在开始时，但它没有......

以下是代码和代码集 - http://codepen.io/carnivean/pen/yOXjMz：

    <div class="container">
    <div class="row">
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#einfach"><img src="http://www.bakari.de/wp-content/uploads/2014/09/61.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#mitbringsel"><img src="http://www.bakari.de/wp-content/uploads/2014/09/45.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-4 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#geburtstagsglueck"><img src="http://www.bakari.de/wp-content/uploads/2014/09/62.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#girl"><img src="http://www.bakari.de/wp-content/uploads/2014/09/57.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#fweihnachten"><img src="http://www.bakari.de/wp-content/uploads/2014/09/60.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-6 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#fehlst"><img src="http://www.bakari.de/wp-content/uploads/2014/09/43.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#glueck"><img src="http://www.bakari.de/wp-content/uploads/2014/09/42.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-4 col-lg-4 col-sm-offset-0 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#hdl"><img src="http://www.bakari.de/wp-content/uploads/2014/09/55.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-6 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#kopfhoch"><img src="http://www.bakari.de/wp-content/uploads/2014/09/40.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#muttertag"><img src="http://www.bakari.de/wp-content/uploads/2014/09/50.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#gutebesserung"><img src="http://www.bakari.de/wp-content/uploads/2014/09/47.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-3 col-lg-3 col-sm-offset-0 col-sm-5 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#happybirthday"><img src="http://www.bakari.de/wp-content/uploads/2014/09/41.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#newyear"><img src="http://www.bakari.de/wp-content/uploads/2014/09/52.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#fostern"><img src="http://www.bakari.de/wp-content/uploads/2014/09/44.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-4 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#christkindl"><img src="http://www.bakari.de/wp-content/uploads/2014/09/63.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-5 col-lg-5 col-sm-offset-1 col-sm-3 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#danke"><img src="http://www.bakari.de/wp-content/uploads/2014/09/46.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#wiesn"><img src="http://www.bakari.de/wp-content/uploads/2014/09/59.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#dankeschoen"><img src="http://www.bakari.de/wp-content/uploads/2014/09/54.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-2 col-xs-10"> <a href="http://bakari.de/unsere-botschaften/#fweihnachten2"><img src="http://www.bakari.de/wp-content/uploads/2014/09/51.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#justmarried"><img src="http://www.bakari.de/wp-content/uploads/2014/09/49.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-1 col-sm-4 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#essiggurken"><img src="http://www.bakari.de/wp-content/uploads/2014/09/53.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#valentine"><img src="http://www.bakari.de/wp-content/uploads/2014/09/48.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-1 col-sm-3 col-xs-offset-2 col-xs-10"> <a href="http://bakari.de/unsere-botschaften/#fostern2"><img src="http://www.bakari.de/wp-content/uploads/2014/09/64.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-5 col-lg-5 col-sm-offset-0 col-sm-5 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#schaffstdas"><img src="http://bakari.de/wp-content/uploads/2014/10/wolke_du_schaffst_das_17.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-1 col-lg-offset-1 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-1 col-xs-11"> <a href="http://bakari.de/unsere-botschaften/#grussvomnikolaus"><img src="http://www.bakari.de/wp-content/uploads/2014/11/grussvomnikolaus.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-3 col-xs-offset-0 col-xs-12"> <a href="http://bakari.de/unsere-botschaften/#glueckwunsch"><img src="http://www.bakari.de/wp-content/uploads/2015/08/wolke_HerzlichenGlueckwunsch.png" class="wolke_s"></a></div>
        <div class=" col-md-offset-0 col-lg-offset-0 col-md-2 col-lg-2 col-sm-offset-0 col-sm-6 col-xs-offset-3 col-xs-9"> <a href="http://bakari.de/unsere-botschaften/#gutefahrt"><img src="http://www.bakari.de/wp-content/uploads/2015/08/wolke_guteFahrt.png" class="wolke_s"></a></div>

    </div>
</div>

正如你所看到的那样，例如＆＃34; Frohe Weihnachten（schlitten）＆＃34;不是在行的开头，我不知道为什么。任何帮助都将受到高度赞赏...

Answer 1

我显然不明白你想要的，但是如果你想在完成第12个网格后想要换行，那么在两个贪婪之间使用Clear或Break。

EX：

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>

<br/>

  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
</div>