隣り合ったブートストラップパネルの整列

Question

いくつかのブートストラップパネルを隣り合わせに整列させることに問題があります。どんなHTMLを追加しても、彼らはいつも互いに結びついてしまいます。どのように私は彼らのお互いの隣にすることができますか？私はそのページにたくさんのことがあるだろう。

マイコード：

<section class="bg-grey-50 padding-top-60 padding-top-sm-30"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-3 col-sm-4 hidden-xs"> 
         <div class="widget"> 
          <div class="panel panel-default"> 
           <div class="panel-heading">Information</div> 
           <div class="panel-body"> 

            <ul class="panel-list margin-top-1"> 
             <li><i class="glyphicon glyphicon-pencil"></i>Info1</li> 
             <li><i class="fa fa-graduation-cap"></i>Info1</li> 
             <li><i class="fa fa-warning"></i>Info1</li> 
           </div> 
          </div> 
         </div> 
         <div class="widget"> 
          <div class="panel panel-default"> 
           <div class="panel-heading">Information</div> 
           <div class="panel-body"> 

            <ul class="panel-list margin-top-1"> 
             <li><i class="glyphicon glyphicon-pencil"></i>Info2</li> 
             <li><i class="fa fa-graduation-cap"></i>Info2</li> 
             <li><i class="fa fa-warning"></i>Info2</li> 
           </div> 
          </div> 
         </div> 





        </div> 


       </div> 
      </div> 
     </section> 

Answer 1

カントは、あなたは自分のwidget別col-md-3 col-sm-4 hidden-xsにラップ？ 4枚のパネルがsm

Codepenhttp://codepen.io/noobskie/pen/rezaaG

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="bg-grey-50 padding-top-60 padding-top-sm-30"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-sm-4 hidden-xs"> 
 
     <div class="widget"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Information</div> 
 
      <div class="panel-body"> 
 
       <ul class="panel-list margin-top-1"> 
 
       <li><i class="glyphicon glyphicon-pencil"></i>Info1</li> 
 
       <li><i class="fa fa-graduation-cap"></i>Info1</li> 
 
       <li><i class="fa fa-warning"></i>Info1</li> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3 col-sm-4 hidden-xs"> 
 
     <div class="widget"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Information</div> 
 
      <div class="panel-body"> 
 
       <ul class="panel-list margin-top-1"> 
 
       <li><i class="glyphicon glyphicon-pencil"></i>Info2</li> 
 
       <li><i class="fa fa-graduation-cap"></i>Info2</li> 
 
       <li><i class="fa fa-warning"></i>Info2</li> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

にmdサイズと3に並べて配置するためにこれはあなたを助けるかもしれないあなたは、この下のコードで試すことができますことができます。

.widget{ 
 
    float : left; 
 
    margin-left : 10px; 
 
    margin-top : 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="bg-grey-50 padding-top-60 padding-top-sm-30"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 hidden-xs"> 
 
     <div class="widget"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Information</div> 
 
      <div class="panel-body"> 
 
       <ul class="panel-list margin-top-1"> 
 
       <li><i class="glyphicon glyphicon-pencil"></i>Info1</li> 
 
       <li><i class="fa fa-graduation-cap"></i>Info1</li> 
 
       <li><i class="fa fa-warning"></i>Info1</li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="widget"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Information</div> 
 
      <div class="panel-body"> 
 
       <ul class="panel-list margin-top-1"> 
 
       <li><i class="glyphicon glyphicon-pencil"></i>Info1</li> 
 
       <li><i class="fa fa-graduation-cap"></i>Info1</li> 
 
       <li><i class="fa fa-warning"></i>Info1</li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="widget"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading">Information</div> 
 
      <div class="panel-body"> 
 
       <ul class="panel-list margin-top-1"> 
 
       <li><i class="glyphicon glyphicon-pencil"></i>Info1</li> 
 
       <li><i class="fa fa-graduation-cap"></i>Info1</li> 
 
       <li><i class="fa fa-warning"></i>Info1</li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>