2013-04-27 3 views
0

У меня есть 20 значков, и я хочу сделать из них горизонтальную линию горизонтальной линии. Но я не могу использовать таблицу HTML, потому что я хочу, чтобы она была отзывчивой. Он должен быть обернут для мобильных пользователей. Используя таблицу HTML, я предполагаю, что я должен использовать 1 строку и 20 столбцов, но она не будет переноситься на маленькие экраны.Создание центрированного стола с Bootstrap

Я создал группу таких divs. Взгляд на это в порядке. http://jsfiddle.net/mayJ6/

<div style="display: inline-block; border: solid 1px black;"> 
    <a href="http://www.example.com" target="_blank" > 
     <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/157940_262105851352_1630693163_q.jpg" 
      width="50" height="50" alt="photo"/> 
    </a> 
</div> 

Но this answer говорит не использовать встроенный блок дисплея в этой ситуации. Есть ли лучшее решение, которое выглядит похоже, используя Twitter Bootstrap и т. Д.?

ответ

0

Я думаю, для этого случая display: inline-block это прекрасно.

В ответ вы ссылаетесь, что речь идет об основном макете, например, когда у вас есть 2 или 3 столбца и вы хотите отображать их рядом друг с другом, и в этом случае их плавание лучше.

Вы можете добиться того же результата с помощью поплавков, но вам придется обернуть фотографии/значки контейнером и установить фиксированную ширину или отступы, чтобы центрировать их таким образом. Он будет по-прежнему охватывать меньшие разрешения, если вы установите ширину в процентах, как в моем примере: http://jsfiddle.net/E9pS9/

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