같은 디브에 있는 두 개의 버튼 사이에 공간을 어떻게 만들 수 있습니까?

같은 디브에 있는 두 개의 버튼 사이에 공간을 어떻게 만들 수 있습니까?

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

버튼이 닿는 순간:

<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에 대해서도 동일한 질문이 여전히 유효합니다.

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

미로슬라프 포포비치 형제가 알려준 대로 수업(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>

부트스트랩에 공간을 사용할 수 있으며 추가 CSS가 필요 없습니다.단추에 클래스를 추가하기만 하면 됩니다.버전 4입니다.

Dragan B가 제안한 것은 Bootstrap 4로 가는 올바른 방법입니다.예를 들어 mr-3이 마진 오른쪽:1rem!important입니다.

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

p.s: 제 경우에는 버튼이 화면 오른쪽에 표시되고 따라서 오른쪽으로 당겨지기를 원했습니다.

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

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

할 수 있는 위치:

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

오어

button{
  margin: 13px;
}

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>

문서를 기반으로 한 또 다른 접근 방법이 있습니다.

 <div class="d-grid gap-2 d-md-flex" >
    <button type="button" class="btn btn-outline-primary btn-sm">button1</button>
    <button type="button" class="btn btn-outline-primary btn-sm">button2</button>
 </div>

Bootstrap 4 buttons 플러그인(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>

이를 달성하기 위한 또 다른 방법은 단추에 class .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 override를 이렇게 사용했습니다.

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

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

만약 모든 웹사이트를 위한 것이라면 cs 파일에 추가하세요.

두개의 버튼을 플렉스박스에 넣어서 cs로 간격을 맞출수도 있습니다.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
    <script crossorigin="anonymous"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
 <div class="d-flex flex-row" style="gap:5px;">
              <button type="button" class="btn btn-primary">Add to list</button>
              <button type="button" class="btn btn-secondary">more</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>

이를 통해 타이틀과 입력 스위치를 잘 정렬할 수 있었습니다.동일한 아이디어를 버튼에 적용하여 버튼이 닿지 않도록 할 수 있습니다.

(부록:위 링크의 댓글을 원했지만, 제 평판이 높지 않습니다.)

언급URL : https://stackoverflow.com/questions/11216645/how-can-i-make-space-between-two-buttons-in-same-div