Проблема начальной загрузки 3 со сдвигом столбцов

ProgramBox

Проблема начальной загрузки 3 со сдвигом столбцов

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#jquery #html #css #twitter-bootstrap-3 #jquery-masonry

#jquery #HTML #css #twitter-bootstrap-3 #jquery-кладка

Вопрос:

У меня проблема с моим макетом, и я, похоже, не могу в этом разобраться.

Я использую Bootstrap 3 с кладкой. Прямо перед загрузкой кладки (или когда она отключена) в контейнере есть 4 элемента, как я и ожидал. Однако, как только применяется masonry, он переносит 4-й элемент в новую строку.

Есть ли что-нибудь очевидное в приведенном ниже коде, что могло бы вызвать это? К моему контенту или к самому масонству не применяется стиль CSS. Это всего лишь 3 столбца, которые помещаются в контейнер из 12 столбцов.

Масонство добавляет к нему позиции, чтобы сделать их расположенными в шахматном порядке, но также сбивает мой 4-й.

Есть идеи о том, что я могу сделать, чтобы сохранить 4 в строке?

Обратите внимание: позиция стиля на изображении ниже добавлена из кладки, а не из того, что у меня было раньше.

введите описание изображения здесь

     <div class="container">
   <ul class="thumbnails list-unstyled posts">
            <!-- Submission Block ID# 1-->
      <li class="col-md-3 item Dog" style="position: absolute; left: 0px; top: 0px;">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/nalaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Nala  <small>(<span class="petType">Dog</span>) (1)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>amp;nbsp;amp;nbsp;Voteamp;nbsp;amp;nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$130.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 1-->  
            <!-- Submission Block ID# 2-->
      <li class="col-md-3 item Cat">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/simbaHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Simba  <small>(<span class="petType">Cat</span>) (2)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>amp;nbsp;amp;nbsp;Voteamp;nbsp;amp;nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$250.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 2-->  
            <!-- Submission Block ID# 3-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/boboHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">BoBo  <small>(<span class="petType">Bird</span>) (3)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>amp;nbsp;amp;nbsp;Voteamp;nbsp;amp;nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li>
      <!-- End Submission Block ID# 3-->  
            <!-- Submission Block ID# 4-->
      <li class="col-md-3 item Bird">
         <div style="padding: 0" class="thumbnail">
            <div style="padding:4px">
               <img src="uploads/frankHUS123.png" style="width: 100%">
            </div>
            <div class="caption">
               <h4 class="">Frank  <small>(<span class="petType">Bird</span>) (4)</small></h4>
               <p>Shes a wonder pup!</p>
               <center><button class="btn btn-primary btn-sm" type="button"><i class="fa fa-heart"></i>amp;nbsp;amp;nbsp;Voteamp;nbsp;amp;nbsp;</button></center>
            </div>
            <div style="text-align: left" class="modal-footer">
               <div class="progress">
                  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
                     <span class="sr-only">60% Complete</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-4"><b>Rank</b><br><small>3rd Place</small></div>
                  <div class="col-md-2"></div>
                  <div class="col-md-4"><b>Raised</b><br><small>$323.00</small></div>
               </div>
            </div>
         </div>
      </li> 
         </ul>
   <nav id="pagination" style="display: none;"><a href="?page=2" class="next"></a></nav>      
</div>

Обновить:

Вот как это выглядит, если я отключу кладку:

введите описание изображения здесь

1. Вот пример того, что я имею в виду: jsfiddle.net/3Upq3/2/embedded/result На него нанесена каменная кладка, и теперь она составляет 3 доллара за кол вместо 4

2. Работает нормально, если вы удалите желоб из параметров кладки. См. jsfiddle.net/koala_dev/3Upq3/6/embedded/result

3. @koala_dev — Я очень разочарован тем, что он был там все время, и я думал, что gutter как-то связан с интервалом внизу:/ … Это исправлено!

Ответ №1:

Опция gutter кладки добавляет горизонтальное пространство между столбцами, чтобы они не помещались в одну строку, удалите его, и он должен работать нормально.

Посмотрите эту обновленную скрипку

Ответ №2:

Попробуйте

 <ul class="thumbnails list-unstyled">

в отличие от

 <ul class="thumbnails list-unstyled posts">

1. Является .posts ли класс начальной загрузки defiend’ом? Я добавил это сам в качестве своего контейнера, который использует masonry, чтобы узнать, где будут новые элементы.

2. Изменил его, черт возьми, и это была та же проблема :/

3. При удалении .posts плагин не знает контейнер для запуска. Как сказано в OP, он отлично работает без запуска плагина, что и произошло в вашей демонстрации; к нему не применялась кладка.

Ответ №3:

Из начальной загрузки: Content should be placed within columns, and only columns may be immediate children of rows.

Из того, что я вижу, у вас есть .container > .col-md-3

Когда вы должны иметь .container > .row > .col-md-3

1. Я попробовал, но столкнулся с той же проблемой; происходит только после инициализации кладки, но он не применяет никакого стиля, кроме позиции слева направо в основном контейнере, поэтому все еще не уверен, что происходит

2. для чего нужен ваш css .item