동일한 div에서 두 버튼 사이에 공백을 어떻게 만들 수 있습니까?

부트 스트랩 버튼을 수평으로 배치하는 가장 좋은 방법은 무엇입니까?

버튼이 닿는 순간 :

<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 : http://jsfiddle.net/hhimanshu/sYLRq/4/

내부 btn-toolbar또는 다른 용기에 넣지 마십시오 btn-group. btn-group함께 합류합니다. 부트 스트랩 문서 에 대한 추가 정보 .

편집 : 원래 질문은 Bootstrap 2.x에 대한 것이지만 여전히 Bootstrap 3 및 Bootstrap 4 에도 유효합니다 .

Bootstrap 4 에서는 mx-2와 같은 유틸리티 클래스를 사용하여 그룹에 적절한 여백을 추가해야합니다.

bro Miroslav Popovic의 설명에 따라 버튼을 클래스 (class = "btn-toolbar")에 넣으십시오.

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

Bootstrap에 간격을 사용할 수 있으며 추가 CSS가 필요하지 않습니다. 버튼에 클래스를 추가하십시오. 버전 4입니다.

부트 스트랩 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>

Dragan B가 제안한 것은 Bootstrap 4로가는 올바른 방법입니다. 아래에 한 가지 예를 들었습니다. 예를 들어 mr-3은 margin-right : 1rem입니다!

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

추신 : 내 경우에는 버튼을 화면 오른쪽에 표시하여 풀 오른쪽을 원했습니다.

대부분의 상황에서 가장 쉬운 방법은 여백입니다.

당신이 할 수있는 곳 :

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

또는

button{
  margin: 13px;
}

Bootstrap 4 버튼 플러그인 ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) 을 사용하고 레이블로 반올림 한 클래스와 중간 버튼에 mx-1 클래스를 추가 하여 별도의 라디오 버튼의 원하는 모양과 느낌. btn-toolbar 클래스를 사용하면 라디오 버튼 원이 나에게 나타납니다. 이것이 누군가를 돕기를 바랍니다.

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

이를 달성하는 또 다른 방법은 버튼에 클래스 .btn-space를 추가하는 것입니다.

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

이 클래스를 다음과 같이 정의하십시오

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

나는 실제로 같은 요구 사항에 부딪쳤다. 나는 단순히 이와 같은 CSS 재정의를 사용했다.

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

부트 스트랩을 사용하는 경우 다음과 같은 스타일로 변경할 수 있습니다. 한 페이지에서만 원하는 경우 헤드 태그 사이에 .btn-group btn {margin-right : 1rem;}을 추가하십시오.

모든 웹 사이트에 대한 경우 CSS 파일에 추가

Dragan B. 솔루션이 맞습니다. 필자의 경우 스택 할 때 버튼을 세로로 간격을 두어야 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>

마크 다이브 가 한 것과 비슷한 일을했지만 약간 다른 간격을 알아 내야했습니다.

col-x부트 스트랩 의 클래스는 절대 생명을 구할 수 있습니다. 나는 이것과 비슷한 것을 끝내었다.

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

이를 통해 제목과 입력 스위치를 깔끔하게 정렬 할 수있었습니다. 버튼에 동일한 아이디어를 적용하여 버튼 터치를 중지 할 수 있습니다.

(측면 참고 : 위 링크에 대한 의견이되기를 원했지만 명성이 충분하지 않습니다)