부트 스트랩을 사용하여 버튼 사이에 간격을 지정하는 방법

버튼 사이의 간격을 지정하고 싶습니다. 부트 스트랩을 사용하여 간격을 지정하여 다른 화면 해상도에 대해 일관되게 유지하는 방법이 있습니다.

사용을 시도했지만 margin-left올바른 방법입니까. ??

다음은 데모입니다.

HTML :

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS :

.margin-left{
    margin-left: 80px !important;
}

부트 스트랩 간격 을 사용하여 얻을 수 있습니다 . Bootstrap Spacing에는 다양한 속기 반응 여백 및 패딩이 포함됩니다. 예를 하회 mr-1설정 margin또는 padding행 $spacer* 0.25.

예:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

Bootstrap Spacing 에서 더 많은 것을 읽을 수 있습니다 .

HTML :

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

CSS :

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

1. class='col-xs-3'예를 들어 버튼을 div로 감싸십시오 .
2. class="btn-block"버튼에 추가 하십시오.

이것은 영구적 인 간격을 제공합니다.

여백을 사용하려면 모든 버튼에서 클래스를 제거하고 : last-child CSS 선택기를 사용하십시오.

HTML :

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS :

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}

원하는 공간에 따라 다릅니다. 각 항목 사이에 "col-XX-1"을 추가하는 논리에 동의하는지 모르겠습니다. 그러면 각 항목 사이에 전체 "열"을 정의하기 때문입니다.

각 버튼 사이에 "약간 간격"을두고 싶으면 둘러싼 행에 패딩을 추가하는 것을 좋아합니다. 이렇게하면 각 버튼 사이에 "공백"을 포함시키면서 12 개의 열을 모두 사용할 수 있습니다.

Bootply : http://www.bootply.com/ugeXrxpPvD

를 사용하여 btn-primary-spacing모든 버튼의 제거를위한 클래스 margin-left클래스

예 :

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

CSS는 다음과 같습니다.

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

Bootstrap의 기본 제공 간격을 사용할 수 있으므로 추가 CSS가 필요하지 않습니다. 이것은 부트 스트랩 4 용입니다.

버튼에 여백을 추가하면 버튼이 더 넓어 지므로 버튼이 그리드 시스템에 맞습니다. 시각 효과 만 중요한 경우 [style = "margin : 0px; border : solid white;"] 버튼에 흰색 테두리를 지정하면 버튼 너비에 영향을주지 않습니다.

원래 코드는 대부분 있지만 btn-group각 버튼 주위에 s 가 필요 합니다. Bootstrap 3에서는 btn-toolbar와 btn-group을 사용하여 작업을 완료 할 수 있습니다. 나는 BS4를하지 않았지만 비슷한 구조를 가지고 있습니다.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>

나는 html에서 꽤 나쁘지만  버튼 사이에 사용했고 잘 작동했습니다.

부트 스트랩을 사용하여 <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>버튼 사이에 추가 할 수 있습니다 .