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

Поддерживает ли Bootstrap кнопки фиксированной ширины? В настоящее время, если у меня есть 2 кнопки, & quot; Сохранить & quot; и & quot; Загрузить & quot ;, размер кнопки изменяется в зависимости от содержимого.

И каков правильный способ расширения Bootstrap?

 aWebDeveloper15 июн. 2012 г., 14:08
@AndresIlich Да
 Andres Ilich15 июн. 2012 г., 14:08
Итак, вы хотите, чтобы эти две кнопки с одинаковой шириной были правильными?
 Andres Ilich15 июн. 2012 г., 14:06
Под фиксированной шириной вы подразумеваете, что он не растет вместе с содержимым внутри? Кнопки ограничены только текстом внутри.
 aWebDeveloper15 июн. 2012 г., 14:07
@AndresIlich В настоящее время, если у меня есть 2 кнопки & quot; Сохранить & quot; и & quot; Скачать & quot; размер кнопки изменяется в зависимости от содержимого
 trante02 нояб. 2013 г., 18:10

Ответы на вопрос(11)

ением фиксированной ширины.

То же самое сделал с 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-group & quot; кнопки внутри будут растягиваться до размера самой большой кнопки.

например:

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

Группы кнопок начальной загрузки

 26 окт. 2016 г., 14:57
Нет, это не работает - кнопки не одинакового размера.
 29 апр. 2016 г., 11:10
Кнопки также должны быть класса btn-block, чтобы это работало, по крайней мере, для меня.
 01 окт. 2014 г., 20:10
теоретически это лучший ответ, но он не работает;)
 30 мар. 2015 г., 11:29
Я пытаюсь достичь той же функциональности, и приведенный выше код также не работает для меня. @DanDascalescu ты нашел другой способ?
 07 окт. 2014 г., 15:53
@DanDascalescu Смотрите это:jsfiddle.net/D2RLR/6984 у меня не работает ...

калибровкаи примените 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>

но я искал решение этой проблемы и стал ленивым.

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

например:

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

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

 16 июл. 2017 г., 04:23
это будет работать только со шрифтами фиксированной ширины
 19 нояб. 2016 г., 22:15
Это не сработает в моем случае & lt; класс = btn btn-default btn-sm & quot; HREF = & Quot; read.php ID = & APOS;?. $ строки [& APOS; & APOS идентификаторов;]. & APOS; & Quot; & GT; & Редактировать л; / а & GT;
 02 окт. 2015 г., 02:58
Если вы используете<button> тег, то вам нужно использовать&nbsp;, например:<button type="button" class="btn btn-default">&nbsp;Edit&nbsp;</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>

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

Мое решение: поместите один и тот же класс в группу кнопок, затем зациклите их все, получите ширину самой длинной кнопки и примените ее ко всем

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

Sample output here

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

1) Это не хак (установка min-width и max-width одинаково хакерская)

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

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

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

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

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

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

Оно работало завораживающе.

Решение Вопроса

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

Это растянет кнопки на всю ширину:

<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>
 06 сент. 2018 г., 01:58
Это правильный ответ для Bootstrap 3.3.btn-group-justified это ключевой класс. Смотрите документацию здесь:getbootstrap.com/docs/3.3/components/…

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

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/

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

 06 окт. 2014 г., 08:21
Kami's answer лучше.
 04 нояб. 2015 г., 12:15
использованиеem единицы вместо пикселей, они помогают вам установить ширину по длине символов
 05 янв. 2018 г., 19:36
@DanDascalescu ~ 2 года спустя я не согласен. Автора не может быть после того, как кнопки будут расширены, чтобы заполнить весь родительский элемент, может быть половина страницы для кнопки с надписью «сохранить». Я бы порекомендовал что-то подобное, но с медиа-запросами, если это будет необходимо. Всегда есть javascript, чтобы сделать их размером с самую большую кнопку, это обычно путь, от которого я держусь подальше

Ваш ответ на вопрос