Jak mogę zrobić odstęp między dwoma przyciskami w tym samym div?


157

Jak najlepiej rozmieścić przyciski Bootstrap w poziomie?

W tej chwili przyciski dotykają się:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

Dwa guziki Bootstrap

jsfiddle pokazujący problem: http://jsfiddle.net/hhimanshu/sYLRq/4/


Miałem ten sam problem i zakończyłem dodawanie marginesu do jednego z przycisków - mr-1.
Ananth

Odpowiedzi:


324

Umieść je w środku btn-toolbarlub w innym pojemniku, nie btn-group. btn-groupłączy je razem. Więcej informacji o dokumentacji Bootstrap .

Edycja: pierwotne pytanie dotyczyło Bootstrap 2.x, ale to samo dotyczy Bootstrap 3 i Bootstrap 4 .

W Bootstrap 4 będziesz musiał dodać odpowiedni margines do swoich grup za pomocą klas narzędzi, takich jak mx-2.


2
Szukałem rozwiązania tego problemu lata temu, dlaczego wcześniej cię nie znalazłem, jesteś moim bohaterem
Hakan Fıstık

1
co za prosta odpowiedź! mój bohater dnia :)
Naga

btn-toolbarmoże zawinąć niektóre przyciski w nową linię. Jak tego uniknąć?
lukas84

Planowane jest przerwanie reakcji. Jeśli naprawdę chcesz, aby zapobiec jej pękaniu, a następnie ustawić flex-wrap: nowrapdla btn-toolbarw Bootstrap 4 lub spróbuj kombinacji overflowi white-spacedla starszych wersji startowej.
Miroslav Popovic

2
@Svend, spójrz nieco poniżej w sekcji „Grupa przycisków” - getbootstrap.com/docs/4.1/components/button-group/ ...
Miroslav Popovic

77

Po prostu umieść przyciski w klasie (class = "btn-toolbar"), jak powiedział brat Miroslav Popovic. Działa świetnie.

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>


9

Możesz użyć odstępów dla Bootstrap i nie potrzebujesz żadnego dodatkowego CSS. Po prostu dodaj klasy do swoich przycisków. To jest dla wersji 4.


Chciałem, aby przyciski pojawiały się w rzędzie i pozwalały na ich układanie (ze względu na zawijanie) na małych ekranach. Aby uzyskać odstępy, które działały zarówno w poziomie, jak iw pionie, używając tego, co zapewnia bootstrap, zrobiłem: className='mb-2 mr-2'zgodnie z sugestią @ dragan-b
ABCD.ca

7

powinieneś użyć bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

To najlepsze rozwiązanie dla Bootstrap 4 IMO. Na mniejszych ekranach możesz użyć „px-0 px-sm-2”, aby odpowiednio pozbyć się wypełnienia. Świetna odpowiedź.
kod rm

6

To, co zasugerował Dragan B, jest właściwą drogą dla Bootstrap 4. Poniżej zamieszczam jeden przykład. np. mr-3 to margin-right: 1rem! ważne

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps: w moim przypadku chciałem, aby moje przyciski były wyświetlane po prawej stronie ekranu, a zatem pociągały w prawo.


po prostu zawijanie przycisków btn-toolbarnapraw problem miejsca!
Arslan Ameer

5

W większości sytuacji najłatwiej jest zastosować margines.

Gdzie możesz:

button{
  margin: 13px 12px 12px 10px;
}

LUB

button{
  margin: 13px;
}

1
Nie należy używać niestandardowych marginesów, gdy można umieścić przyciski ładowania początkowego wewnątrz klasy btn-toolbar.
Millsionaire

2

Użyłem wtyczki Bootstrap 4 buttons ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) i dodałem klasę zaokrągloną do etykiet i klasę mx-1 do środkowego przycisku, aby uzyskać pożądany wygląd i działanie oddzielnych przycisków opcji. Używając paska narzędzi klasy btn , pojawiły się dla mnie kółka przycisków opcji, co nie jest tym, czego chciałem. Mam nadzieję, że to komuś pomoże.

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

2

Innym sposobem osiągnięcia tego jest dodanie klasy .btn-space do przycisków

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

i zdefiniuj tę klasę w następujący sposób

.btn-space {
    margin-right: 15px;
}

0

W rzeczywistości spotkałem się z tym samym wymaganiem. Po prostu użyłem CSS override w ten sposób

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

0

jeśli używasz Bootstrap, możesz zmienić styl, taki jak: Jeśli chcesz tylko na jednej stronie, to między tagami nagłówka dodaj .btn-group btn {margin-right: 1rem;}

Jeśli jest dla wszystkich witryn internetowych dodaj do pliku css


0

Rozwiązanie Dragana B. jest prawidłowe. W moim przypadku potrzebowałem, aby przyciski były rozmieszczone w pionie podczas układania w stos, więc dodałem do nich właściwość mb-2.

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

-1

Skończyło się na tym, że zrobiłem coś podobnego do tego, co zrobił Mark Dibe , ale musiałem obliczyć odstępy w nieco inny sposób.

Na col-xzajęcia w bootstrap może być absolutnym ratownik. W końcu zrobiłem coś podobnego do tego:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

Umożliwiło mi to wyrównanie tytułów i przełączników wejścia w ładnie rozmieszczonych odstępach. Ten sam pomysł można zastosować do przycisków i uniemożliwić ich dotykanie.

(Uwaga dodatkowa: chciałem, aby był to komentarz do powyższego linku, ale moja reputacja nie jest wystarczająco wysoka)

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.