it-swarm.com.de

Tasten mit fester Breite mit Bootstrap

Unterstützt Bootstrap Tasten mit fester Breite? Wenn ich zwei Schaltflächen habe, "Speichern" und "Herunterladen", ändert sich die Schaltflächengröße je nach Inhalt.

Was ist auch der richtige Weg, um Bootstrap zu erweitern?

145
aWebDeveloper

Sie können auch die Klasse .btn-block für die Schaltfläche verwenden, damit sie auf die Breite des übergeordneten Elements erweitert wird.

Wenn das übergeordnete Element ein Element mit fester Breite ist, wird die Schaltfläche auf die gesamte Breite erweitert. Sie können vorhandene Markierungen auf den Container anwenden, um sicherzustellen, dass die festen/flüssigen Tasten nur den erforderlichen Platz beanspruchen.

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

266
Kami

Dazu können Sie eine Breite auswählen, von der Sie denken, dass sie für beide Schaltflächen in Ordnung ist. Erstellen Sie dann eine benutzerdefinierte Klasse mit der Breite und fügen Sie sie so zu Ihren Schaltflächen hinzu:

CSS

.custom {
    width: 78px !important;
}

Ich kann diese Klasse dann verwenden und sie wie folgt zu den Schaltflächen hinzufügen:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

Demo: http://jsfiddle.net/yNsxU/

Sie können die von Ihnen erstellte benutzerdefinierte Klasse in ein eigenes Stylesheet aufnehmen, das Sie nach dem Bootstrap-Stylesheet laden. Wir tun dies, da alle Änderungen, die Sie im Bootstrap-Stylesheet vornehmen, beim Aktualisieren des Frameworks versehentlich verloren gehen können. Außerdem möchten wir, dass Ihre Änderungen Vorrang vor den Standardwerten haben.

55
Andres Ilich

Wenn Sie Ihre Schaltflächen in einem div mit der Klasse "btn-group" platzieren, werden die Schaltflächen darin auf die Größe der größten Schaltfläche ausgedehnt.

z.B:

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

33
kravits88

Für Ihre Schaltflächen können Sie einen anderen CSS-Selektor für diese speziellen Klassen von Schaltflächen mit einer angegebenen Mindestbreite und Höchstbreite erstellen. Also wenn deine taste ist

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

In Ihrer Bootstrap-CSS-Datei können Sie so etwas erstellen

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

Auf diese Weise sollte es immer 80 Pixel bleiben, auch wenn Sie ein responsives Design haben.

Was die richtige Erweiterung von Bootstrap betrifft, so werfen Sie einen Blick auf diesen Thread:

Bootstrap erweitern

12
Marc

Mit BS 4 können Sie auch die dimensionierung verwenden und w-100 anwenden, damit die Schaltfläche die gesamte Breite des übergeordneten Containers einnehmen kann.

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

2
Prakash G. R.

Eine Blockbreitenschaltfläche kann leicht zu einer Reaktionsschaltfläche werden, wenn der übergeordnete Container reagiert. Ich denke, dass die Verwendung einer Kombination aus einer festen Breite und einem detaillierteren Auswahlpfad anstelle von! Wichtig ist, weil:

1) Es ist kein Hack (Einstellung von min-width und max-width ist jedoch hackig) 

2) Verwendet nicht den! Wichtigen Tag, was schlechte Praxis ist

3) Verwendet width also ist sehr lesbar und jeder, der versteht, wie das Kaskadieren in CSS funktioniert, wird sehen, was los ist (vielleicht einen CSS-Kommentar hinterlassen?)

4) Kombinieren Sie Ihre Selektoren für Ihren Zielknoten, um die Genauigkeit zu erhöhen 

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

Erweiterung der @ kravits88-Antwort:

Dadurch werden die Knöpfe auf die gesamte Breite gedehnt:

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

Gerade kam das gleiche Bedürfnis auf und war nicht zufrieden mit der Definition der festen Breite. 

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

Hier habe ich eine Lösung gefunden, indem ich Schaltflächen in einem Schaltflächengruppenelement verglich. Die einfache Lösung besteht darin, den mit der größten Breite zu erhalten und die Breite auf die anderen Schaltflächen festzulegen. Sie können also eine gleiche Breite haben.

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

Es hat wie ein Zauber funktioniert.

0
sulhadin

btn-group-justified und btn-group funktionieren nur für statische Inhalte, nicht jedoch für dynamisch erstellte Schaltflächen. Das Festlegen mit der Schaltfläche in css ist nicht praktikabel, da sie auf derselben Breite bleiben, selbst wenn der Inhalt kurz ist.

Meine Lösung: Die gleiche Klasse in eine Gruppe von Schaltflächen einfügen, dann zu allen Schaltflächen schleifen, die Breite der längsten Schaltfläche ermitteln und auf alle anwenden

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

 Sample output here

0
Dards

Der beste Weg zur Lösung Ihres Problems ist die Verwendung des Tastenblocks btn-block mit der gewünschten Spaltenbreite .

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

0
A Sonik