센터 부트 스트랩 버튼

Question

패널에 부트 스트랩 버튼을 센터링하는 데 문제가 있습니다. 오른쪽 여백과 왼쪽 여백이 작동하지 않습니다. 버튼을 적절히 가운데 맞추는 방법이 있습니까? 버튼은 모바일 규모 때문에 중앙에 위치해야합니다.

코드 :

<div class="n_monitor"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-default">Server 1</button> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <span class="caret"></span> 
        <span class="sr-only">Toggle Dropdown</span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CSS : 버튼에

.n_monitor .panel { 
    width: 628px; 
    border: solid 1px #ebebeb; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    height: 94px; 
    box-shadow: none; 
    margin: 0; 
    background-color: #f4f4f4; 
    margin-left: auto; 
    margin-right: auto; 
} 

.n_monitor .btn { 
    width: 126px; 
    height: 54px; 
    background-color: #3baed8; 
    border: none; 
    color: #fff; 
    font-size: 14px; 
    border-radius: 3px; 
} 

Answer 1

추가 부트 스트랩의 Alignment Classtext-center.panel-body합니다.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.n_monitor .panel { 
 
    width: 100%; 
 
    border: solid 1px #ebebeb; 
 
    border-top-left-radius: 0px; 
 
    border-top-right-radius: 0px; 
 
    border-bottom-left-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
    height: 94px; 
 
    box-shadow: none; 
 
    margin: 0; 
 
    background-color: #f4f4f4; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.n_monitor .btn { 
 
    width: 126px; 
 
    height: 54px; 
 
    background-color: #3baed8; 
 
    border: none; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    border-radius: 3px; 
 
}

<div class="n_monitor"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body text-center"> 
 
     <div class="btn-group"> 
 
      <button type="button" class="btn btn-default">Server 1</button> 
 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      <span class="caret"></span> 
 
      <span class="sr-only">Toggle Dropdown</span> 
 
      </button> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

당신은 간단하게 추가 할 수 있습니다 "센터 블록"클래스입니다.

<button class = "center-block">Test</button> 

Answer 3

이것은 항상 가장 잘 작동합니다. Bootstrap을 사용할 때 특이점은 완벽하게 작동합니다.

#button{ 
display: table; margin: 0 auto; 
} 

Answer 4

센터 버튼의 부모의 텍스트 (.n_monitor의 .panel 바디)

.n_monitor .panel-body 
{ 
    text-align: center; 
}