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

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>

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

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.

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>

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.

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

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

Gdzie możesz:

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

LUB

button{
  margin: 13px;
}

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>

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

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 }

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

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>

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)