Фиксированные кнопки ширины с 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>

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

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

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

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

расширения Bootstrap

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

1) это не хак (установка min-width и max-width то же самое, однако hacky)

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

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

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

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

С 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>

расширение @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>

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

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

лучший способ решения вашей проблемы-использовать блок кнопок 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>

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

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

например :

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

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