Zeilen und Spalten funktioniert nicht Bootstrap

Question

Ich versuche, Zeilen und Spalten zu verwenden, aber es funktioniert nicht, eine neue Zeile wird nicht erstellt, es füllt nur die Breite der Zeile vor dem Starten einer neuen Zeile. Ich habe es mit Chrom und Safari versucht und es funktioniert nicht auf beiden.

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

bearbeiten

fand ich bei der Inspektion, dass es etwas gibt, das das folgende Inline-Styling fügt hinzu, die das Problem dies aus

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

Answer 1

Versuchen verursacht. Es erstellt 4 Zeilen und 4 Spalten (wenn Sie das suchen).

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

Edit:

Vergewissern Sie sich, diese in Ihrem Header <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

Das ganze Problem ist aus dem isotope.js Layoutmodus, der die Elemente in Zeilen gezwungen passen

Die Lösung ist ein ‚kein‘ das Layoutelement zu schaffen, und es in der Assign Isotop

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