숨겨진 하위 요소가있는 부트 스트랩 입력 그룹의 동작에 대한 설명

입력란에 입력 그룹의 부트 스트랩 클래스가 포함 된 입력란과 버튼이있는 경우 포함 된 요소의 전체 너비가 채워집니다. 그런 다음 버튼을 숨기면 입력 필드가 전체 너비를 차지하는 대신 기본 길이로 축소됩니다. 그것은 조금 다음과 같습니다 : 이것에 대한숨겨진 하위 요소가있는 부트 스트랩 입력 그룹의 동작에 대한 설명

Top input full width, bottom input shorter

코드가 여기 http://jsfiddle.net/1gu6qnhk/1/ 볼 수 있습니다.

는 기본적으로이 문제는 다음 코드를 줄일 수 있습니다

<head> 
<style> 
.group { 
    display: table; 
} 
.input {  
    width: 100%; 
} 
.item {  
    display: table-cell; 
    width: 1%; 
} 
</style> 
</head> 
<body> 
<div class="group"> 
    <input class="input" /> 
    <span class="item"></span> 
</div> 
<div class="group"> 
    <input class="input" /> 
    <span class="item">text</span>  
</div> 
</body>

이유는 첫째 사업부는 유일한 차이점은 폭의 일부를 차지하는 초 동안 사용할 수있는 전체 폭을 차지 않습니다 두 번째 div의 스팬에 텍스트가 들어 있습니다. 이 양식을 시도 할 수 있습니다 여기에 http://jsfiddle.net/Lbyjo79e/1/

출처

2014-12-17 Richard Williams

100 %로 상위 요소의 폭을 설정하면이 문제를 해결합니다. (http://jsfiddle.net/Lbyjo79e/2/)

.group { 
    display: table; 
    width: 100%; 
} 
.input { 
    width: 100%; 
} 
.item { 
    display: table-cell; 
    width: 1%; 
}

문제는 실제로 테이블 요소와 동일합니다. 그래서 당신은있는 경우 :

td { 
    width:100%; 
    border: 1px black solid; 
} 

<table> 
    <td>two cells</td> 
    <td></td> 
</table> 
<table> 
    <td>one cell</td> 
</table>

그런 다음 첫 번째 테이블은 최대 폭을 차지하지만 두 번째 표는 일부만을 차지합니다. 테이블 너비를 100 %로 설정하면 문제가 해결됩니다. 피들 ( http://jsfiddle.net/bkngop0f/).

출처

2014-12-18 08:53:37

바이올린 : http://jsfiddle.net/07r866vp/

<div class="form-group"> 
    <input class="form-control" value="The span after this has text" /> 
<span class="item"> 
text 
</span> 

</div> 
<div class="form-group"> 
    <input class="form-control" value="The span after this is empty" /> 
<span class="item"> 

</span> 

</div>

출처

2014-12-17 17:10:03 benny

감사합니다.하지만 실제로이 문제가 발생하는 이유를 해결하는 방법보다 실제로 관심이 있습니다. 또한 솔루션에 각각 다른 CSS가 필요하지만 동일한 CSS를 사용하고 두 번째 요소를 숨기고 표시하기를 원합니다. –

숨겨진 하위 요소가있는 부트 스트랩 입력 그룹의 동작에 대한 설명

답변

관련 문제