Кнопки фиксированной ширины с Bootstrap

Для этого вы можете придумать ширину, которую вы чувствуете в порядке для обеих кнопок, а затем создать пользовательский класс с шириной и добавить его к вашим кнопкам следующим образом:

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/

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

Если вы поместите свои кнопки внутри 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> 

Группы кнопок Bootstrap

Для ваших кнопок вы можете создать другой селектор CSS для тех специальных классов кнопок с указанной минимальной шириной и максимальной шириной. Поэтому, если ваша кнопка

<button class="save_button">Save</button>

В вашем файле CSS Bootstrap вы можете создать что-то вроде

.save_button {
    min-width: 80px;
    max-width: 80px;
}

Таким образом, он всегда должен оставаться 80 пикселей, даже если у вас есть отзывчивый дизайн.

Что касается правильного пути расширения Bootstrap, взгляните на эту тему:

Расширение бутстрапа

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

1) Его не взломать (установка min-width и max-width одинаково, но хаки)

2) Не использует важный тег, который является плохой практикой

3) Использование ширины так будет очень читабельным, и любой, кто понимает, как работает каскадирование в CSS, увидит, что происходит (может быть, оставить комментарий CSS для этого?)

4) Объедините свои селекторы, которые применяются к целевому node для повышения точности

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Просто натолкнулась на ту же потребность и не была насыщена определением фиксированной ширины.

Так было с 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>

Это может быть глупое решение, но я искал решение этой проблемы и ленился.

В любом случае с помощью ввода class= "btn..."... вместо кнопки и заполнения атрибута value = с пробелами, чтобы они были одинаковой ширины, работает очень хорошо.

например:

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

Я не использовал загрузочный блок так долго, и, возможно, есть веская причина не использовать этот подход, но подумал, что я мог бы также поделиться