트위터 부트스트랩 양식 필드에서 유체 컨테이너를 사용할 때 우물이 넘쳐나는 이유는 무엇인가요?

업데이트: 문제 데모: http://jsfiddle.net/fdB5Q/embedded/result/

약 767픽셀에서 998픽셀까지 양식 필드가 포함된 우물보다 더 넓습니다.

767px보다 작으면 전체 양식 영역이 새 줄로 이동합니다. 브라우저 창 너비가 약 200px일 때 렌더링된 페이지는 완벽하게 표시됩니다. 양식 필드가 예상대로 축소됩니다.

시각적으로 보려면 이 매우 유사한 질문을 보세요: https://stackoverflow.com/questions/11706019/twitter-bootstrap-css-static-fluid-form-positioning

여기에 헤드의 모든 것이 있습니다:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

몸의 모든 것이 여기에 있습니다:

<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>

**프레임워크의 일부를 잘못 이해하고 있는 것 같습니다. 유체 컨테이너를 사용하면 안 되나요? 제가 뭘 잘못하고 있나요? 이 문제를 해결하기 위해 무언가를 조합해 볼 수는 있지만, 큰 그림에서 뭔가 잘못하고 있는 것 같습니다.

스팬을 7과 5로 변경해 보았지만 여전히 같은 오류가 발생했습니다. 6과 6을 시도했지만 그 시점에서 페이지가 우스꽝스럽게 보이기 시작했습니다. 나머지 답변은 저에게 이해가 되지 않았습니다.

입력 클래스를 xlarge 대신 large로 변경했습니다. 여전히 너비가 넘쳐서 디스플레이에 공간이 있다면 더 넓은 양식 필드를 원합니다.

가로 스크롤 막대를 피하고 페이지 텍스트가 스마트폰의 가로 또는 세로 모드에서 같은 크기로 표시되기를 원합니다.

업데이트: 사진

내 문제 페이지:

간소화된 버전:

브라우저 너비 200픽셀의 간소화된 버전:

Community
편집된 질문23일 5월 2017 в 11:47
프로그래밍
html css twitter-bootstrap
7일 8월 2012 в 10:33
아직 보기가 없습니다.
질문에 대한 의견 (5)
해결책

입력 HTML 태그와 해당 '.input-*' 스타일은 CSS '너비'만 설정합니다. 이는 의도된 것입니다.

그러나 css max-width:100%를 추가하면 너무 큰 입력을 제어할 수 있습니다.
예: Head:_에 추가하세요.


    input {
        max-width: 100%;
    }
해설 (2)

일반적으로 저는 class="spanX"가 있는 요소에 다른 class="row-유체" 및 class="span12"를 사용하여 일부 요소의 너비를 100%로 맞추는 것을 선호합니다. 이렇게 하면 다른 해상도에서는 버그가 발생하지 않습니다. 그래서 span4 클래스가 있는 요소에 또 다른 row-유체 클래스를 추가하고, 그 새 row-유체 안에 span12가 있는 div를 추가했습니다. 필요한 것을 얻기 위해 기본 부트스트랩 설정을 재정의해야 할 때가 있으므로 입력 / 입력 요소 안에 내 입력 클래스를 추가하여 너비를 100%로 하고 좌우 패딩을 제거했습니다(패딩으로 인해 오른쪽에 버그가 발생함). 다음은 코드입니다:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    Your Name
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

와 재정의용 CSS 클래스

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

Jsfiddle 데모][1]를 보고 화면 크기를 조정해 보세요.

해설 (4)

방금 이 문제를 발견했는데 양식 입력에 대한 부트스트랩 문서를 확인해보니 &39;.input-large와 같은 상대적 크기 조정 클래스를 사용하거나 .span* 클래스를 사용하여 그리드 열 크기에 입력을 일치시키라&39;고 나와 있습니다;

제 부트스트랩 행은 콘텐츠의 경우 스팬9로, 사이드바의 경우 스팬3으로 설정했습니다. '<input class='span3'/>`를 설정하면 화면 크기가 줄어들어도 입력 상자가 사이드바 내에 유지되어 문제가 해결되었습니다.

Rich2020
편집된 답변5일 9월 2012 в 9:07
해설 (4)

그냥 조금 입력입니다 플레이 한 후 이런 영생하리라그것이 (보인다). 내가 사용하는 간단한 너버 속성 및 세트 redhat. 컨테이너인 패딩 및 기타 요인에 따라 95 ~ 85% 가 실제로 위해 css 에서 계속 입력 필드 가장자리에 스트레치할 컨테이너입니다.

.input-example {
   width: 90%; 
}

I AM NOT 이 분야의 전문가입니다! 그리고 제발 배운 것이 없는 나는 그저 오퍼링이 시행하십시오 조언을 통해 이 같은 노련한 본다. Back to life on trying to give a little 커뮤니티 구해줬으니 있는 수많은 차례다.

해설 (0)

문제는 이 모든 것보다 더 많은 법적 afaq 오른쪽맞춤, 외람되나. 아무것도 못한 최대 폭 사용하여 가져다줄래요. 내가 싫어하는 것을, 그래서 그곳으로 약간은요 보았으매 엉터리 파고

이것은 이러한 css 3 선 아래로 선언한 형식 컨트롤:

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

한 때 입력 요소를 설정되었습니다 너비입니다 텍스트 형, 가로 패딩, 국경 가속화합니다 100% 에 수행됨을 대신 탈퇴했다. 따라서 100%, 그 텍스트 입력 폼 제어입니다 너비입니다 500px 말하도다 그렇고여 너버 w w + 12+12+1+1, 526px 됩니다. 즉 일정한 비율 (%) 는 두 가지 않는 한 추가 26px 순례중일 너비입니다 계산됩니까 무중단으로 100% 로 * (w / (w + 26px)) 또는 26px 100%, 일이 결코 나올 수 있다.

  • 개인적으로 ᄀ군의 html / css 인터페이스입니다 인컨텍스트 내부 오류입니다 정의 또는 구현 (I don& # 39, 모르는 어떤, 정말 don& # 39, t want 시도하시려면 찾기 위해 변화하는 샌즈 표준에 대한 참조.) 입력 필드를 말하도다 경우 수정 요구를 적용할 수 있는지, 그리고 100% 것입니다 너버 할 수 있는 너비입니다 100 %100%, 국경 폭이 가로 여백 없이 included.* 여유폭 아닌

그리고, by the way, 백분율 값이거나 doesn& # 39, 크기가 고정된 것은 아니다. 또한, re they& # 39 에서 오프하도록 26px. 이러한 26px 필터링하도록 필요한 &solarisdvd 너비입니다.

데이터 유실이란 없습니다 # 39 의 경우, CSS, 적어도 부트스트랩에 출력본 투입물 표시되어도 you& 사용할 수 있는 re 컴파일러와의 클라이언트 측 계산. 예를 들어 감소

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

발쿰치로 다 좋습니다. 단, 이메일 및 비밀번호 유형 (적어도) 은 동일한 문제가 없다.

이 종류의 멸종될 26px 물론 있지만, 그래서 당신의 손이 왜 종류의 묶임 형식 컨트롤 선언 상수입니다 코딩된 꽂으십시오 있다. 잘 잡을 수 있는 테스트 약간만이라도 체크된다면 크기가 아니라, CSS 에 대한 통제를 렌더링합니다 선언 변경으로부터 부트스트랩에 업그레이드합니다 오늘밤에요 아싸리오.

해설 (0)

나는 이 문제가 실행했음 구현하므로 양식 투입물 및 패널 바디입니다. 내가 답변됨 그 다음 항목: [https://stackoverflow.com/questions/12195931/twitter-bootstrap-stop-input-field-extending-beyond-well # 28813614? 아니 = 1] [1]

[1]: https://stackoverflow.com/questions/12195931/twitter-bootstrap-stop-input-field-extending-beyond-well = 1 # 28813614 아냐? 문제는 그게 가져다줄래요 양식을 쏟아지고 있었다. 이 맞춤화할 투입물 따라야 할 수 있도록 했다. 수정한 형태의 의해 최대 폭 (최대 폭: 100%) I was 투입물 고칠 수 있는 다른 모든 내용이 아니라 양식 안에 배치될 수 있습니다.

Community
편집된 답변23일 5월 2017 в 12:34
해설 (0)

누구나 찾을 수

Html:

<input class="form-control" placeholder="Threshold Type">

CSS.

.form-control { box-sizing: border-box; }
해설 (0)

파블로 표시된 이 대답: https://stackoverflow.com/questions/12195931/twitter-bootstrap-stop-input-field-extending-beyond-well

클래스를 사용하여 '대신' 블록 단위로 입력입니다 초대형 입력입니다 (또는 다른 크기) 문제 해결 잘 알려져 있다.

Community
편집된 답변23일 5월 2017 в 11:33
해설 (0)