Wie setze ich einen Rand mit bootstraps btn-block?

Question

Ich wollte einen Rand zu meinen Tasten hinzufügen, während ich den btn-Block des Bootstrap benutze. Leider tut es nicht, was ich wollte, weil der Knopf nicht schrumpft. Der Button verschwindet aus seinem Div.

Unter diesem Text können Sie sehen, was ich meine. Beide Buttons enthalten Bootstraps 'btn-block' Element. Der Button oben hat einen Rand.

<div> 
    <button type="button" class="btn btn-block btn-default" style="margin:0px 10px 0px 10px;">No</button> 
    <button type="button" class="btn btn-block black-button">Yes</button> 
</div> 

Kennt jemand wie ich, dass die Taste bleibt in der oben div eine Marge auf den Button einer Weise anwenden können?

Answer 1

Sie sollten Padding zu Ihrem Container div geben. Nicht Tasten

<div style="width:90%; padding:0 10px;"> 
    <button type="button" class="btn btn-block btn-default" >No</button> 
    <button type="button" class="btn btn-block black-button">Yes</button> 
</div> 

können Sie das Beispiel sehen: https://codepen.io/tsdln/pen/OgLYrE

Answer 2

Bootstrap ist ein großartiges Framework, aber sie nicht und kann nicht jeden möglichen Anwendungsfall abgedeckt haben. Ich weiß nicht, wie andere es tun, aber ich habe eine separate CSS-Datei, die ich nach dem BS Thema laden (ich nenne es overrides.css) und ich halte in ihm Dinge wie:

.no-margin, .no-margins { margin:0px !important; } 
.no-padding, .no-paddings { padding:0px !important; } 
@media only screen and (max-width:651px) { 
    .mobile-no-margin, .mobile-no-margins { margin:0px !important; } 
    .mobile-no-padding, .mobile-no-paddings { padding:0px !important; } 
} 

Dann wende ich nur diejenigen, Klassen wo immer ich brauche.

Wenn Sie über einen zusätzlichen Treffer besorgt sind und keine Asset-Pipeline haben, können Sie einfach so etwas am Ende des Bootstrap-Stylesheets einfügen.