Bootstrap: уменьшить столбец
У меня есть таблица со столбцами дерева. Я хочу, чтобы "маленький" столбец был как можно меньше.
Я думал, что col-auto делает это:
Используйте классы col-{breakpoint}-auto для определения размера столбцов на основе естественной ширины их содержимого.
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<table class = "table table-bordered">
<tr>
<td>big1</td>
<td class = "col-auto">small</td>
<td>big2</td>
</tr>
</table>Как я могу уменьшить «маленький» столбец и дать место другим столбцам?
Ответы 2
Класс col-auto использует правило flex, но ваш родительский контейнер не определен как display: flex. Боковые теги td должны быть установлены на flex: 1.
.table.table-bordered tr {
display: flex;
}
.table.table-bordered tr td:nth-child(1),
.table.table-bordered tr td:nth-child(3) {
flex: 1;
}<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<table class = "table table-bordered">
<tr>
<td>big1</td>
<td class = "col-auto">small</td>
<td>big2</td>
</tr>
</table>@guettli, За всю свою практику я ни разу не использовал бутстрап, так как для меня бутстрап — бесполезный инструмент. Но я ни в коем случае не буду отговаривать вас от этих рамок. Это должен быть только ваш выбор. Но мой совет - используйте ваш (ванильный) css.
«Сергей Кузнецов» указал мне правильное направление.
Вот решение, основанное на классах начальной загрузки:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<table class = "table table-bordered">
<tr class = "d-flex">
<td class = "flex-grow-1">big1</td>
<td>small</td>
<td style = "flex: 4">big2</td>
</tr>
</table>Поскольку Bootstrap поддерживает только flex-grow-0 и flex-grow-1, я добавил пример, как решить эту проблему с помощью ванильного CSS (style = "flex: 4").
Каков ваш общий совет: используйте vanilla css или используйте bootstrap?