부트 스트랩 입력 그룹 Addon 부동 논리

입력 범위를 모두 한 줄로 연결하려고했지만 스팬 부분을 추가 한 후 addon과 마지막 텍스트 상자가 오른쪽으로 이동하여 결합되지 않습니다. 휴대 전화에서는 정상적으로 작동하지만 일반 모니터에서는 분리되어 있습니다. 첫 번째 텍스트 상자 옆에있는 addon과 마지막 텍스트 상자를 어떻게 움직일 수 있습니까? 다음부트 스트랩 입력 그룹 Addon 부동 논리

<div class="form-group"> 
    <label for="tbxBegYear" class="col-sm-2 control-label">Year</label> 
    <div class="col-sm-10"> 
     <div class="input-group"> 
      <asp:TextBox ID="tbxBegYear" CssClass="form-control" runat="server" MaxLength="4" placeholder="Begin"/> 
      <span class="input-group-addon">-</span> 
      <asp:TextBox ID="tbxEndYear" CssClass="form-control" runat="server" MaxLength="4" placeholder="End"/> 
     </div> 
    </div> 
</div>

출처

2014-12-15 user3788671

이 모든 것은 스캐 폴딩에 따라 다를 수 있습니다. 모바일에서 괜찮아 보이는군요. 주로 그리드 레이아웃에 col-sm을 사용합니다. 그리드 레이아웃은 주로 ≥768px 및 ≥992px의 그리드 시스템을 정의합니다. 그리드 클래스를 더 정의하면 레이아웃이 변경 될 수 있습니다. 플러스 그것은 컨테이너가 이러한 요소와 거기에 너비/격자 레이아웃에 따라 다릅니다. 예를 들어, 이와 같은 빠른 것 (http://www.bootply.com/sYPYqdqk7Y)이 좋습니다. – haxtbh

네, @haxtbh와 동의하십시오. 우리는 더 많은 정보가 필요합니다. 당신이 우리에게 준 것만으로도 멋지게 보입니다 (http://codepen.io/anon/pen/WbwWEJ 참조). 어떤 다른 작풍은 이것을 떨어져 던지고있다. 데모를 만들 수 있습니까? –

좋아, 너희들 지역에서 무슨 말하는지 알 겠어. 내 textboxes 최대 크기가 200px 있기 때문에 문제가 될 수 있습니다 생각합니다. – user3788671

여기 enter image description here

이 같은 올해의 코드는 모습입니다 :

여기

그것이 모습입니다 (올해와 가격 텍스트 상자는 내 문제의 예입니다) 코드가 작동하기 때문에 질문에 답하기 위해 알아야 할 CSS가 있다고 생각합니다.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Start"/> 
 
    <span class="input-group-addon">-</span> 
 
    <input type="text" class="form-control" placeholder="End"/> 
 
</div>

출처

2014-12-15 22:07:01 KyleMit

부트 스트랩 입력 그룹 Addon 부동 논리

답변

관련 문제