整列リスト・グループ（ブートストラップ3）

Question

私は水平現在、このように行動し、私のリスト・グループ、揃えるにしようとしている：私が欲しいもの

http://i.imgur.com/OPTebN3.png

をリストグループを表示するためのものです次の行では、上のリストグループの直下で最大の高さで表示されます。

これらはすべて6行ずつ同じ行に配置されます。私のコードは次のようになります。私は、これはCMSシステムに実装必要があるとして、

        <div class="col-sm-6"> 
            <div class="list-group"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Soveværelser</h4> 
              <ul class="ul-with-bullets"> 
               <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
               <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
              </ul> 
             </div> 
            </div> 
           </div> 
           <div class="col-sm-6"> 
            <div class="list-group"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Toiletter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Nr 1: WC. Varmt og koldt vand</li> 
               </ul> 
             </div> 
            </div> 
           </div> 

私は、すべての第二リスト・グループに新しい行を作成しないようしたいと思います。グリッドを設定するスマートな方法はありますか？リストのグループを下に並べると、空白を取り除くこともできますが、可能であればそれはできません。

編集：コードの変更が追加されました。

<div class="row"> 
           <div class="col-sm-12"> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Soveværelser</h4> 
              <ul class="ul-with-bullets"> 
               <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
               <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
              </ul> 
             </div> 
            </div> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Toiletter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Nr 1: WC. Varmt og koldt vand</li> 
               </ul> 
             </div> 
            </div> 
           </div> 
           <div class="col-sm-12"> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Andre faciliteter</h4> 
              <ul class="ul-with-bullets"> 
                <li>Køkken: varmt og koldt vand</li> 
                <li>Gas/elkomfur</li> 
                <li>Opvaskemaskine</li> 
               </ul> 
             </div> 
            </div> 
            <div class="list-group col-sm-6"> 
             <div class="list-group-item"> 
              <h4 class="list-group-item-heading">Udenfor</h4> 
              <ul class="ul-with-bullets"> 
                <li>Terrasse el. lignende</li> 
                <li>P-plads på grunden: 3</li> 
                <li>Havemøbler</li> 
                <li>Grill</li> 
               </ul> 
             </div> 
            </div> 
           </div> 
         </div> 

Answer 1

やあ、あなたはここでCSSのフレキシボックスを試すことができます

CSS

.row.flex-row{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} 
    .row.flex-row > div{margin-bottom: 15px;} 
    .row.flex-row .list-group{margin-bottom: 0;} 
    .row.flex-row .list-group,.row.flex-row .list-group .list-group-item{height: 100%;} 

HTML

<div class="row flex-row"> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Soveværelser</h4> 
       <ul class="ul-with-bullets"> 
        <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
        <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 


        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="list-group"> 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading">Toiletter</h4> 
       <ul class="ul-with-bullets"> 
         <li>Nr 1: WC. Varmt og koldt vand</li> 
        </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

私はこれを行うことができると思います方法は、このようなものです：私は、私はcol-sm-12にcol-sm-6を変更し、その後、私はlist-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-sm-12"> 
 
    <div class="list-group col-sm-6"> 
 
    <div class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Soveværelser</h4> 
 
     <ul class="ul-with-bullets"> 
 
     <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
 
     <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-12"> 
 
    <div class="list-group col-sm-6"> 
 
    <div class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Toiletter</h4> 
 
     <ul class="ul-with-bullets"> 
 
     <li>Nr 1: WC. Varmt og koldt vand</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

にcol-sm-6を追加しました あなたが探しているものがあればそれほど確かではありませんが、テーブルでそれをするのでしょうか？

<table> 
    <thead> 
     <tr> 
     <th></th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
    <td> 

     <div class="list-group"> 
      <div class="list-group-item"> 
      <h4 class="list-group-item-heading">Soveværelser</h4> 
      <ul class="ul-with-bullets"> 
       <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li> 
       <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li> 
      </ul> 
      </div> 

     </div> 
     </td> 
     <td> 

     <div class="list-group"> 
      <div class="list-group-item"> 
      <h4 class="list-group-item-heading">Toiletter</h4> 
      <ul class="ul-with-bullets"> 
       <li>Nr 1: WC. Varmt og koldt vand</li> 
      </ul> 
      </div> 
     </div> 

     </td> 
    </tbody> 

</table>