Làm cách nào để tạo khoảng trắng giữa hai nút trong cùng một div?

Cách tốt nhất để không gian các nút Bootstrap theo chiều ngang là gì?

Tại thời điểm các nút đang chạm:

<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 hiển thị vấn đề: http://jsfiddle.net/hhimanshu/sYLRq/4/

Đặt chúng bên trong btn-toolbarhoặc một số container khác, không btn-group. btn-groupkết hợp chúng lại với nhau Thông tin thêm về tài liệu Bootstrap .

Chỉnh sửa: Câu hỏi ban đầu là dành cho Bootstrap 2.x, nhưng câu hỏi tương tự vẫn có hiệu lực với Bootstrap 3 và Bootstrap 4 .

Trong Bootstrap 4, bạn sẽ cần thêm lề thích hợp cho các nhóm của mình bằng các lớp tiện ích, chẳng hạn như mx-2.

Chỉ cần đặt các nút trong một lớp (class = "btn-thanh công cụ") như được nói bởi bro Miroslav Popovic. Nó hoạt động tuyệt vời.

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

Bạn có thể sử dụng khoảng cách cho Bootstrap và không cần thêm CSS. Chỉ cần thêm các lớp vào các nút của bạn. Đây là phiên bản 4.

bạn nên sử dụng 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>

Những gì Dragan B gợi ý là cách đi đúng cho Bootstrap 4. Tôi đã đưa ra một ví dụ dưới đây. ví dụ: mr-3 là lề phải: 1rem! quan trọng

<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: trong trường hợp của tôi, tôi muốn các nút của mình được hiển thị ở bên phải màn hình và do đó kéo sang phải.

Cách dễ nhất trong hầu hết các tình huống là lề.

Nơi bạn có thể làm:

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

HOẶC LÀ

button{
  margin: 13px;
}

Tôi đã sử dụng plugin Bootstrap 4 nút ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) và thêm lớp được làm tròn vào nhãn và lớp mx-1 vào nút giữa để đạt được giao diện mong muốn của các nút radio riêng biệt. Sử dụng thanh công cụ btn lớp đã làm cho các vòng tròn nút radio xuất hiện cho tôi, đó không phải là điều tôi muốn. Hy vọng điều này sẽ giúp được ai đó.

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

Một cách khác để đạt được điều này là thêm một lớp .btn-space trong các nút của bạn

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

và định nghĩa lớp này như sau

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

Tôi thực sự chạy vào cùng một yêu cầu. Tôi chỉ đơn giản sử dụng ghi đè CSS như thế này

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

nếu sử dụng Bootstrap, bạn có thể thay đổi theo kiểu như: Nếu bạn chỉ muốn trong một trang, sau đó gắn thẻ đầu betwen thêm .btn-group btn {margin-right: 1rem;}

Nếu là cho tất cả các trang web thêm vào tập tin css

Giải pháp Dragan B. đúng. Trong trường hợp của tôi, tôi cần các nút được đặt cách nhau theo chiều dọc khi xếp chồng nên tôi đã thêm thuộc tính mb-2 cho chúng.

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

Cuối cùng tôi đã làm một cái gì đó tương tự như những gì mà bộ lạc đánh dấu đã làm, nhưng tôi cần phải tìm ra khoảng cách cho một cách hơi khác.

Các col-xlớp trong bootstrap có thể là một cứu cánh tuyệt đối. Tôi cuối cùng đã làm một cái gì đó tương tự như thế này:

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

Điều này cho phép tôi căn chỉnh các tiêu đề và công tắc đầu vào một cách độc đáo. Ý tưởng tương tự có thể được áp dụng cho các nút và cho phép bạn dừng các nút chạm vào.

(Lưu ý bên lề: Tôi muốn đây là một nhận xét về liên kết trên, nhưng danh tiếng của tôi không đủ cao)