Поддерживает ли Bootstrap кнопки фиксированной ширины? В настоящее время, если у меня есть две кнопки, "Сохранить" и "Загрузить", размер кнопки изменяется в зависимости от содержимого.
И какой правильный способ расширения Bootstrap?
Кнопки с фиксированной шириной с бутстрапом
Ответ 1
Вы также можете использовать класс .btn-block на кнопке, чтобы он расширялся до ширины родителя.
Если родительский элемент является фиксированной шириной, кнопка будет расширяться, чтобы получить всю ширину. Вы можете применить существующую разметку к контейнеру, чтобы гарантировать, что кнопки с фиксированной/жидкостью занимают только необходимое пространство.
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>Ответ 2
Для этого вы можете придумать ширину, которую вы чувствуете в порядке для обеих кнопок, а затем создать пользовательский класс с шириной и добавить его к вашим кнопкам следующим образом:
CSS
.custom {
width: 78px !important;
}
Затем я могу использовать этот класс и добавлять его к таким кнопкам:
<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>
Демо: http://jsfiddle.net/yNsxU/
Вы можете создать этот настраиваемый класс и поместить его в свою собственную таблицу стилей, которую вы загружаете после таблицы стилей загрузки. Мы делаем это, потому что любые изменения, которые вы помещаете внутри таблицы стилей загрузки, могут случайно потеряться при обновлении фреймворка, мы также хотим, чтобы ваши изменения имели приоритет над значениями по умолчанию.
Ответ 3
Если вы поместите свои кнопки внутри div с классом "btn-group", кнопки внутри будут растягиваться до того же размера, что и самая большая кнопка.
например:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Ответ 4
Для ваших кнопок вы можете создать другой селектор CSS для тех специальных классов кнопок с указанной минимальной шириной и максимальной шириной. Поэтому, если ваша кнопка
<button class="save_button">Save</button>
В вашем файле CSS Bootstrap вы можете создать что-то вроде
.save_button {
min-width: 80px;
max-width: 80px;
}
Таким образом, он всегда должен оставаться 80 пикселей, даже если у вас есть отзывчивый дизайн.
Что касается правильного пути расширения Bootstrap, взгляните на эту тему:
Ответ 5
Расширяя @kravits88 ответ:
Это растянет кнопки на всю ширину:
<div className="btn-group-justified">
<div className="btn-group">
<button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
<button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>
Ответ 6
В BS 4 вы также можете использовать размер и применить w-100, чтобы кнопка могла занимать всю ширину родительского контейнера.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Using btn-block
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
<p>
Using w-100
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary w-100">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>Ответ 7
Кнопка ширины блока может легко стать отзывчивой кнопкой, если родительский контейнер реагирует. Я думаю, что использование комбинации фиксированной ширины и более детального пути выбора вместо! Важно, потому что:
1) Его не взломать (установка min-width и max-width одинаково, но хаки)
2) Не использует важный тег, который является плохой практикой
3) Использование ширины так будет очень читабельным, и любой, кто понимает, как работает каскадирование в CSS, увидит, что происходит (может быть, оставить комментарий CSS для этого?)
4) Объедините свои селекторы, которые применяются к целевому node для повышения точности
.parent_element .btn.btn-primary.save-button {
width: 80px;
}
Ответ 8
Просто натолкнулась на ту же потребность и не была насыщена определением фиксированной ширины.
Так было с jquery:
var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
$("#share_cancel").width (max);
$("#share_commit").width (max); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
<button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>Ответ 9
Лучший способ решения вашей проблемы - использовать блок кнопок btn-block с желаемой шириной столбца.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<button class="btn btn-primary btn-block">Save</button>
</div>
<div class="col-md-12">
<button class="btn btn-success btn-block">Download</button>
</div>Ответ 10
Здесь я нашел решение, сравнивая кнопки в элементе группы кнопок. Простое решение - получить тот, который имеет наибольшую ширину, и установить ширину для других кнопок. Таким образом, они могут иметь равную ширину.
function EqualizeButtons(parentElementId) {
var longest = 0;
var element = $(parentElementId);
element.find(".btn:not(.button-controlled)").each(function () {
$(this).addClass('button-controlled');
var width = $(this).width();
if (longest < width) longest = width;
}).promise().done(function () {
$('.button-controlled').width(longest);
});
}
Оно работало завораживающе.
Ответ 11
btn-group-jusised и btn-group работают только для статического содержимого, но не для динамически создаваемых кнопок, и фиксированное с помощью кнопки в css нецелесообразно, так как оно остается на той же ширине, даже если все содержимое короткое.
Мое решение: поместите один и тот же класс в группу кнопок, затем зациклите их все, получите ширину самой длинной кнопки и примените ее ко всем
var bwidth=0
$("button.btnGroup").each(function(i,v){
if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);
Ответ 12
https://getbootstrap.com/docs/3.4/css/ использование сеток очень полезно для кнопок или подобных вещей.
Ответ 13
Это может быть глупое решение, но я искал решение этой проблемы и ленился.
В любом случае с помощью ввода class= "btn..."... вместо кнопки и заполнения атрибута value = с пробелами, чтобы они были одинаковой ширины, работает очень хорошо.
например:
<input type="submit" class="btn btn-primary" value=" Calculate "/>
<input type="reset" class="btn btn-primary"value=" Reset "/>
Я не использовал загрузочный блок так долго, и, возможно, есть веская причина не использовать этот подход, но подумал, что я мог бы также поделиться