it-swarm.com.de

Ändern Sie die Schaltflächen in "btn-block" für die Bildschirmgröße des Handys

Gibt es eine Möglichkeit, mit Hilfe von Bootstrap 3 die btn-Block-Klasse auf einer "xs" - Bildschirmgröße zu verwenden?

Derzeit habe ich ein Formular, das einige Zeilen enthält, die 3 Dropdowns und zwei Schaltflächen enthalten. Das sieht auf großen und mittleren Bildschirmen gut aus.

Wenn sich das Formular auf kleinen Bildschirmen ändert und die Formularsteuerelemente gezwungen sind, vertikal zu fließen, behalten die Schaltflächen dieselbe Größe bei und es wirkt blöd, wenn sie auf die linke Seite des Bildschirms gedrückt werden.

Im Idealfall möchte ich sie auf den kleineren Bildschirmgrößen als Blockschaltflächen anzeigen lassen, sodass sie die gesamte Breite des Formulars (ebenso wie die Formularsteuerelemente) einnehmen und ein bisschen schöner aussehen.

20
Mr Pablo

Fügen Sie der Schaltfläche Ihre benutzerdefinierte Klasse hinzu, und verwenden Sie Medienabfragen, um die Breite auf Geräten bis zu Ihrem Haltepunkt auf 100% festzulegen. SO dh 

<button class"bootstrap classes custom-class></button>   

und in CSS 

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}   

Sie können auch steuern, was oberhalb dieses Haltepunkts geschieht, indem Sie Medienabfragen für verschiedene Haltepunkte einrichten.

30
robjez

Durch Hinzufügen des unten gezeigten CSS zu Ihrer Bootstrap 3 - Anwendung wird die Unterstützung für

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

klassen, die Variationen von btn-block bereitstellen, die auf die Größe des Ansichtsfensters ansprechen.

Wenn Sie mehrere Schaltflächen nebeneinander haben und diese nicht auf kleine Bildschirme passen, also brechen und in eine andere Zeile umbrechen, fügen Sie den Schaltflächen einfach btn-xs-block oder btn-sm-block (oder in seltenen Fällen eine der anderen Klassen) hinzu in voller Breite und auf kleinen Bildschirmen gestapelt sein:

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

CSS für Bootstrap 3:

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}
14
caw

Für Bootstrap 4 verwende ich Folgendes:

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

Siehe hier für Referenz - http://v4-alpha.getbootstrap.com/layout/overview/

13
Victor

Wenn Sie nur "native" Bootstrap-Klassen verwenden möchten, können Sie Folgendes tun:

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
2

Sie können die Schaltfläche auch in ein Raster einfügen, sodass Sie keine zusätzlichen CSS schreiben müssen.

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>
0
ethmz

Dies ist die Lösung, die ich für Bootstrap 4 gefunden habe, da ich den Knopf zentriert lassen wollte, außer bei einer mobilen Auflösung, bei der ich wollte, dass er den Container füllt.

Dabei wird auf beiden Seiten eine Rasterspalte erstellt, die bei der kleinsten Größe ausgeblendet wird. d-none aber sichtbar auf klein und höher d-sm-block dann stelle ich eine größere Größe für groß und darüber ein, damit die Schaltfläche bei allen Größen eine sinnvolle Breite behält:

<div class="row">
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
   <div class="col-md text-center">
      <button type="submit" class="btn btn-primary btn-block">Register</button>
   </div>
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
</div>
0
Robin Wilson

Für Bootstrap 4.3 können Sie eingebaute Klassen verwenden. Mobil: Block anzeigen Desktop: Inline-Block anzeigen

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>
0
Brett