Как создать столбец динамической ширины в Twitter Bootstrap

Ответ 1

Структура таблицы, использующая старый тег таблицы

Просто шучу - или я нет.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr>
</table>

Использование сетки

В документации о системной загрузке я не смог найти никаких блоков автоматической ширины. Все из коробки имеет определенную ширину и фиксированное количество столбцов:

   <div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">[email protected]</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">[email protected]</div>
    </div>

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

В моей демонстрации столбец grid-column обертывается, если пространство должно быть узким или, если пространство слишком велико, столбцы растянуты.

Обновление с помощью рекламной разметки

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

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">[email protected] <br />
        [email protected]
      </div>
  </div>    

Использование таблицы отображения css-3

В tutsplus я нашел статью, используя css-3 display:table, чтобы настроить таблицу как макет. Если вы не используете три div для каждой строки, это не решает проблемы с упаковкой строк.

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}  

Бутстрап отзывчивый дизайн

Насколько я понял загрузочную документацию, нет встроенной души для трехколоночного макета с автоматической и оставшейся шириной. Чтобы запросить отзывчивую страницу дизайна в бутстрапе: "Ответьте на запросы СМИ и только в качестве начала вашей мобильной аудитории. Для более крупных проектов обратите внимание на выделенные базы кода, а не на слои медиа-запросов".

Не могли бы вы подробнее объяснить, почему вы не можете использовать таблицу?

Ответ 2

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

В зависимости от варианта использования существует другое решение, которое вы можете рассмотреть:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
Это часть CSS, которая добавляет "col-sm-auto" в дополнение к "col-sm-1", "col-sm-5" и т.д.

(Atm, я бы рекомендовал просто скопировать это в пользовательский файл css и настроить на ваши нужды.)

Пример

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

Вот скрипка: http://jsfiddle.net/9wzqz/

Идея

• .col - * - auto floats слева, с типичным дополнением, но без какой-либо явной настройки ширины.
• .col - * - auto-right плавает справа.
• .col-middle имеет display: table, который предотвращает его перемещение вокруг других элементов.
• Используйте "xs", "sm", "md", "lg" для таргетинга на определенные ширины экрана.

Ограничения

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

Средний столбец будет использовать только полную доступную ширину, если в нем будет достаточно содержимого.

Ответ 3

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

<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>

Мне нужно определение bootstrap для других свойств столбца (padding, height и т.д.), поэтому я добавил определение col, но небольшое подразделение (col-xs-1).

заметки:

• предложение "! important" может быть удалено (я не уверен)
• В моем проекте тексты, как известно, все равно малы.

Ответ 4

Хорошо согласно загрузочная документация вы можете применить класс table-responsive css к элементу таблицы и сделать его отзывчивым. Я наблюдал, что на самом деле это делает прокрутки.