Кнопки з фіксованою шириною за допомогою Bootstrap

Чи підтримує Bootstrap кнопки фіксованої ширини? Наразі, якщо у мене є 2 кнопки "Зберегти" та "Завантажити", розмір кнопки змінюється залежно від вмісту.

Також який правильний спосіб розширення Bootstrap?

Ви також можете використовувати .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>

Для цього ви можете створити ширину, на яку ви вважаєте, нормально для обох кнопок, а потім створити спеціальний клас із шириною та додати його до своїх кнопок так:

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/

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

Якщо ви розмістите свої кнопки у розділі з класом "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> 

Групи кнопок завантаження

Для своїх кнопок ви можете створити інший селектор CSS для тих спеціальних класів кнопок із заданою мінімальною шириною та максимальною шириною. Тож якщо ваша кнопка

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

У файлі CSS Bootstrap ви можете створити щось на кшталт

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

Таким чином, він завжди повинен залишатися на 80 пікселів, навіть якщо у вас чутливий дизайн.

Що стосується правильного способу розширення Bootstrap, подивіться на цю тему:

Розширення завантажувальної програми

За допомогою 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>

btn-group-justify і btn-group працюють лише для статичного вмісту, але не для динамічно створених кнопок, і фіксований кнопкою в css не є практичним, оскільки він залишається на одній ширині, навіть весь вміст короткий.

Моє рішення: поставте один і той же клас до групи кнопок, а потім обведіть їх усіма, отримайте ширину найдовшої кнопки та застосуйте її до всіх

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

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

1) Це не хак (встановлення мінімальної ширини та максимальної ширини однаково, проте, хакі)

2) Не використовує важливий тег, який є поганою практикою

3) Ширина використання буде дуже читаною, і кожен, хто розуміє, як каскадно працює в CSS, побачить, що відбувається (можливо, залиште коментар CSS для цього?)

4) Об’єднайте ваші селектори, які застосовуються до вашого цільового вузла для підвищення точності

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

Найкращим способом вирішення вашої проблеми є використання кнопки 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>

Тут я знайшов рішення, порівнявши кнопки в елементі групи кнопок. Просте рішення - отримати одне з найбільшою шириною і встановити ширину на інші кнопки. Так вони можуть мати рівну ширину.

    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);
    });
}

Це спрацювало як шарм.

Це може бути дурне рішення, але я шукав рішення цієї проблеми і лінувався.

У будь-якому випадку, використовуючи input class = "btn ..." ... замість кнопки та заміщення атрибута value = пробілами, щоб вони були однакової ширини, працювали досить добре.

наприклад:

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

Я так довго не використовую завантажувальний інструмент, і, можливо, є вагома причина не використовувати цей підхід, але я подумав, що можу також поділитися