行と列が動作しないブートストラップ

Question

私は行と列を使用しようとしていますが、動作していません。新しい行は作成されず、新しい行を開始する前に行の幅を埋めるだけです。私はクロムとサファリで試してみましたが、両方で動作していません。

      <div class="container"> 
        <div class="row" id='bsoon'> 
         <div class="col-lg-3 col-md-3 thumbs item-thumbs bedroomcloset mattress chair accessory"> 
          <p>Coming soon</p> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
            <h3>The City</h3> 
          </div> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheCity</div> 
          <a class="hover-wrap fancybox" id="fbox" rel="city" title="The City" href="_include/img/work/full/image-01-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img align="middle" src="_include/img/work/thumbs/image-01.jpg" alt="This kitchen features unadorned minimalism that’s fresh, relaxing and welcoming thanks to the white and yellow glossy paint. Handless drawers and Doors with soft opening and closing mechanism enabling drawers to open and shut smoothly." style="margin-top:-60px"> 
          </div> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheCity</div> 
          <a class="hover-wrap fancybox" rel="city" title="The City" href="_include/img/work/full/image-08-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-08.jpg" alt="This kitchen features unadorned minimalism that’s fresh, relaxing and welcoming thanks to the white and yellow glossy paint. Handless drawers and Doors with soft opening and closing mechanism enabling drawers to open and shut smoothly."> 
           </div> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheCity</div> 
          <a class="hover-wrap fancybox" rel="city" title="The City" href="_include/img/work/full/image-08-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-08.jpg" alt="This kitchen features unadorned minimalism that’s fresh, relaxing and welcoming thanks to the white and yellow glossy paint. Handless drawers and Doors with soft opening and closing mechanism enabling drawers to open and shut smoothly."> 
          </div> 
           </div> 
         <div class="row"> 
           <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen">   
           <h3>The Executive</h3> 
          </div> 
         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheExecutive</div> 
          <a class="hover-wrap fancybox" rel="exec" title="The Executive" href="_include/img/work/full/image-02-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-02.jpg" alt="The perfect contrast of graphite mirror-like doors with the warmth of Ebony veneer made even more stunning with the two-level black and (glow-in-the-dark) worktops, where the island brings the working surface close to the family, and sets the scene on center stage: seating at the grey metallic bar is symbolic of a new togetherness."> 
         </div> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheExecutive</div> 
          <a class="hover-wrap fancybox" rel="exec" title="The Executive" href="_include/img/work/full/image-09-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-09.jpg" alt="The perfect contrast of graphite mirror-like doors with the warmth of Ebony veneer made even more stunning with the two-level black and (glow-in-the-dark) worktops, where the island brings the working surface close to the family, and sets the scene on center stage: seating at the grey metallic bar is symbolic of a new togetherness."> 
          </div> 
     </div> 
         <div class="row"> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
           <h3>The Arctic</h3> 
          </div> 
         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheArctic</div> 
          <a class="hover-wrap fancybox" rel="arc" title="The Arctic" href="_include/img/work/full/image-05-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-05.jpg" alt="A kitchen of pure fashion creativity. A functional design without handles, with full extension drawer slides to avoid excess bending. The mirror- like blue arcylic tall units communicate with the zebrano laminate elements, creating a combination of closed and open shelves."> 
          </div> 
         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheArctic</div> 
          <a class="hover-wrap fancybox" rel="arc" title="The Arctic" href="_include/img/work/full/image-06-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-06.jpg" alt="A kitchen of pure fashion creativity. A functional design without handles, with full extension drawer slides to avoid excess bending. The mirror- like blue arcylic tall units communicate with the zebrano laminate elements, creating a combination of closed and open shelves."> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
           <h3>The Vavona</h3> 
          </div> 
         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 thumbs item-thumbs kitchen"> 
          <div class="name" hidden>TheVavona</div> 
          <a class="hover-wrap fancybox" rel="vavona" title="The Vavona" href="_include/img/work/full/image-03-full.jpg"> 
           <span class="overlay-img"></span> 
           <span class="overlay-img-thumb font-icon-plus"></span> 
          </a> 
          <img src="_include/img/work/thumbs/image-03.jpg" alt="Power through contrast, when very different refined materials and original colours enter into symbiosis, big things happen. The island is enhanced with a black top accommodating a ceramic hob and a hood in the center of the room where you can enjoy the experience of cooking in the atmosphere of fresh orange colour, brown metallic laminate and the exotic Vavona wood!!"> 
          </div> 
         </div> 
        </div> 

編集

という問題

position: absolute; 
left: 0px; 
top: 0px; 
transform: translate3d(0px, 0px, 0px); 

Answer 1

はこれを試してみて原因以下のインラインスタイルを追加し、何かがあることを検査する場合、私が見つかりました。 4行4列を作成します（探している場合）。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
     <div class="col-sm-3">Text here</div> 
    </div> 
</div> 

編集：

あなたのヘッダー<head>内にこれを持っていることを確認してください。

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 
crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
crossorigin="anonymous"></script> 

Answer 2

全体の問題は、行

にソリューションを合わせて要素を余儀なくisotope.js layoutmodeからである「なし」layoutmode要素を作成し、それを割り当てることです同位体

var NoneMode = Isotope.LayoutMode.create('none'); 
     $container.isotope({ 
     layoutMode: 'none', 
     });