CSS 부트 스트랩이있는 버튼 그룹에 진행률 막대를 추가하는 방법은 무엇입니까?

Question

진행률 표시 줄의 "바로 옆에"같은 줄에 단추 그룹을 넣으려고합니다.

row 템플릿을 사용하려고했지만 그 사이에 큰 공간이 생깁니다. 나는 서로를 바로 옆에두고 싶어. 여기

<div class="container"> 

    <div class="row"> 

     <div class="col-sm-3"> 
      <div class="btn-group btn-group-sm" role="group" aria-label="..."> 

       <button class="btn btn-info" role="button"> 
        <span class="glyphicon glyphicon-play"></span> 
       </button> 

       <button class=" btn btn-info" role="button"> 
        <span class="glyphicon glyphicon-stop"></span> 
       </button> 
      </div> 
     </div> 

     <div class="col-sm-9"> 
      <div class="progress mb-0 height-30"> 
       <div class="progress-bar progress-bar-striped progress-bar-warning" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div> 
      </div> 
     </div> 

    </div> 

</div> 

는 https://jsfiddle.net/DTcHh/40763/

가 어떻게 진행을 할 수 있습니다 내 코드와 피들러는 버튼 그룹의 일부처럼입니까?

Answer 1

부트 스트랩 3을 사용하면 컨테이너에서 거터를 제거하는 것과 같은 몇 가지 '트릭'으로 프레임 워크를 확장해야합니다. 그 중 .btn-group-justified을 이용하려면 <button>에서 <a>...</a>으로 전환해야합니다.

궁극적으로 당신의 코드는 다음과 같이 보일 것입니다 :

.row.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
} 
 

 
.row.no-gutters > [class^="col-"], 
 
.row.no-gutters > [class*=" col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 

 
.button-controls .btn-group .btn:last-child { 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.button-controls .progress, 
 
.button-controls .progress-bar { 
 
    height: 30px; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row no-gutters button-controls"> 
 
    <div class="col-xs-3"> 
 
     <div class="btn-group btn-group-sm btn-group-justified" role="group" aria-label="..."> 
 
     <a class="btn btn-info" role="button"> 
 
      <span class="glyphicon glyphicon-play"></span> 
 
     </a> 
 

 
     <a class=" btn btn-info" role="button"> 
 
      <span class="glyphicon glyphicon-stop"></span> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-9"> 
 
     <div class="progress"> 
 
     <div class="progress-bar progress-bar-striped progress-bar-warning" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

한 가지 방법은 귀하의 경우에 btn-group로 row를 사용하지하는 것입니다 것은에 해결 클래스 col-md-3의 부모가 25% 너비와 btn-group은 단지 2 개의 버튼으로 구성되어 있으므로이 금액은 width이 아닙니다.

은 여기 바이올린의 포크입니다 : JS FIDDLE

변경 :

가 row 및 columns 제거하고 단지이 도움이 btn-group 즉 float: left

호프 pull-left을 추가 당함. :)