부트 스트랩 입력 그룹 동적 너비

부트 스트랩 입력 그룹 입력 요소 너비를 동적으로 만들 수 있습니까? 나는 너비를 설정하려고 시도했다 : 자동; 그러나 입력 그룹은 여전히 너비가 설정되어있는 것 같습니다.부트 스트랩 입력 그룹 동적 너비

<form class="col-sm-12 form-horizontal"> 
<div class="col-sm-6"> 
    <ul class="form-group list-inline list-unstyled"> 
    <li class="" ng-repeat="item in items"> 
     <div class="input-group list-item"> 
     <input type="text" readonly="" class="form-control" value="{{item}}" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="removeExpedition(item)"> 
      <span class="glyphicon glyphicon-remove"></span> 
      </button> 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 
</form>

및 CSS : 여기

.list-item>.input-group-btn { 
    width: auto; 
}

을 입증하는 plunker이다. 입력과 버튼 사이의 모든 공백을보십시오. 나는 set padding과 함께 입력 요소 바로 옆에 버튼을 갖고 싶습니다.

출처

2016-12-05 rodney757

바로 너라면 너비를 100 % 차지할 수있는 버튼이 필요합니까? –

이 시도 :

.list-inline > li, .input-group { 
    width: 100%; 
}

출처

2016-12-05 16:32:11

나는 이것을 행운으로 시험해 보았다. 입력 그룹이 줄당 1 개가됩니다. – rodney757

아마도 아직 이해가되지 않을 수 있습니다. 모든 입력 그룹을 1 행에 넣으시겠습니까? –

일 필요는 없습니다. 현재 각 입력 그룹은 동일한 너비입니다. 나는 그것을 원하지 않는다. 각 입력 그룹이 텍스트 및 "X"버튼에 필요한만큼만 커지 길 원합니다. 텍스트와 "X"버튼 사이의 각 입력 그룹에서 여분의 공백을 제거해야합니다. 그래서 입력 그룹. 따라서 "3"이라는 텍스트가있는 입력 그룹은 "And_one_more"라는 텍스트가있는 입력 그룹만큼 넓지 않습니다. – rodney757

이 작업을 수행하기 위해 부트 스트랩에 클래스가 내장되어 있습니다. 그냥 버튼 클래스를 제공 (btn-block)

출처

2016-12-05 16:36:56

어디에서 추가해야합니까? 단추에서 작동하지 않는 것 – rodney757

는 리튬 요소 스타일 display: block에 추가하고 모든

출처

2016-12-05 16:49:53 Joint

이것은 입력 그룹이 전체 div를 채우는 것처럼 보입니다. – rodney757

아, 이제는 달성하고자하는 것을 이해하지 못합니다. CSS 또는 부스트랩만으로는이 작업을 수행 할 수 없습니다. this : http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value – Joint

괜찮아 클래스 btn-block 그룹의 div.input에 추가, 그래서 BTN-그룹을 사용하여이 작업을 수행 할 수 있었다 입력 그룹 대신. 입력 값을 표시하는 데만 사용되었으므로 필요하지 않습니다. 기본적으로 btn-group은 포함 된 텍스트의 폭이 넓습니다.

출처

2016-12-06 13:16:49 rodney757

부트 스트랩 입력 그룹 동적 너비

답변

관련 문제