Ответ 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;
}
Бутстрап отзывчивый дизайн
Насколько я понял загрузочную документацию, нет встроенной души для трехколоночного макета с автоматической и оставшейся шириной. Чтобы запросить отзывчивую страницу дизайна в бутстрапе: "Ответьте на запросы СМИ и только в качестве начала вашей мобильной аудитории. Для более крупных проектов обратите внимание на выделенные базы кода, а не на слои медиа-запросов".
Не могли бы вы подробнее объяснить, почему вы не можете использовать таблицу?