Bootstrap 3 галерея изображений переопределяет

Я использую Bootstrap 3 RC1, и у меня возникли проблемы с правильной настройкой галереи изображений.Bootstrap 3 галерея изображений переопределяет

Задача 1 - ul добавляет padding-left или margin-left. Что мне нужно переопределить, чтобы удалить его?

Задача 2 - каждый li охватывает контейнер, а не ограничивается классом span4. Я хотел бы иметь два изображения в строке.

Я добавил изображение ниже, показывающее, где проблемы.

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div id="allVideos"> 
     <ul class="thumbnails"> 
      <li class="span4"> 
      <div class="thumbnail"> 
       <img src="<%= thumbnail_image %>"> 
       <div class="caption"> 
       <a data-attribute="<%= _id %>" class="delete">X</a> 
       <h3><a class="video_item"><%= title %></h3></h3> 
       </div> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div>

IMAGE enter image description here

источник

2013-08-12 Evan Emolo

ли просто добавить 'набивка налево: 0;' и 'Левое поле: 0; 'для CSS не решить вашу первую проблему? – MitulP91

Также, когда вы используете контейнер в начальной загрузке, он автоматически создает поля слева и справа, не так ли? Я не экспериментировал с Bootstrap 3, но я не уверен, изменилось ли это. – MitulP91

@ MitulP91 Спасибо, что исправленная проблема 1. –

Bootstrap 2.3 использовал классы «span» (span4 в вашем примере), а Bootstrap 3.0 использует классы «col-X» (col-lg-X в вашем примере). Классы «span» больше не существуют.

Проблема 1 - Используйте класс list-unstyled, чтобы удалить левое/правое поле от <li> детей. http://getbootstrap.com/css/#type-lists

Задача 2 - Брось класс диапазона и использовать Bootstrap 3 Scandinavia новые классы:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <ul class="list-inline list-unstyled row"> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

источник

2013-08-13 02:38:29

Попробуйте добавить это к изображению, чтобы сделать его отзывчивым:

<img src="<%= thumbnail_image %>" class="img-responsive">

(реф: http://getbootstrap.com/css/#overview-responsive-images)

Для заполнения и разметки вы можете просто добавить свои собственные стили для переопределения?

.thumbnails{ margin-left:0; padding-left: 0;}

источник

2013-08-12 19:51:27

Спасибо. Изображения действительно отзывчивы. Его класс «thumbnail», который добавляет все пробелы между изображением и контейнером. –

Также рекомендую посмотреть на this thread

кажется Twitter Bootstrap 3 все еще в стадии строительства, и я думаю, что col-lg-12 класс все еще имеет некоторые проблемы. Я лишь кратко взглянул на него.

Надеюсь, это поможет.

источник

2013-08-12 20:02:41 MitulP91

Bootstrap 3 галерея изображений переопределяет

ответ

Смежные вопросы