부트 스트랩 입력을위한 부모 컨테이너의 완벽한 100 % 너비?

부트 스트랩 입력을위한 부모 컨테이너의 완벽한 100 % 너비?

---

부트 스트랩 입력 필드를 부모의 너비와 정확히 100 %로 만들려면 어떻게해야합니까?

steve-obrien은 Bootstrap Issue # 1058 에서 다음과 같이 썼습니다 .

100 %로 설정하면 패딩을 고려하지 않으므로 입력 필드에 직접 적용 할 때 작동하지 않습니다. 따라서 컨테이너의 100 %와 입력 상자의 패딩을 더하면 입력 상자가 일반적으로 컨테이너 외부에서 끊어집니다.

이 티켓은 다양한 솔루션을 제공하지만 최선의 방법을 찾고 있습니다. 가급적이면 Bootstrap에서 이미 제공 한 CSS 클래스입니다.

---

input-block-level수업을 적용하는 것은 다양한 화면 너비에서 저에게 효과적입니다. 다음과 같이 Bootstrap에mixins.less 의해 정의됩니다 .

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

이것은 이슈 # 1058 에 대한 그의 논평 에서 '어셈블러'가 제안한 스타일과 매우 유사합니다 .

---

상자 크기를 추가하기 만하면됩니다.

input[type="text"] {
    box-sizing: border-box;
}

---

인터넷 검색을하는 사람에게 한 가지 제안은 모든 input-group클래스 인스턴스 를 제거하는 것 입니다. 비슷한 상황에서 나를 위해 일했습니다. 원래 코드 :

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

새 코드 :

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" name="time" placeholder="Time">
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <select name="dtarea" class="form-control">
            <option value="1">Option value 1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <input type="text" name="reason" class="form-control" placeholder="Reason">
    </div>
  </div>
</form>

---

C # ASP.NET MVC의 기본 템플릿을 사용하는 경우 site.css 가 일부 Bootstraps 스타일을 재정의 한다는 것을 알 수 있습니다 . 내가했던 것처럼 부트 스트랩을 사용하고 싶다면 M $이 (당신의 지식없이) 이것을 무시하는 것은 큰 좌절의 원천이 될 수 있습니다! 원치 않는 스타일을 자유롭게 제거하십시오 ...

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

---

내 경우에 효과가있는 해결책을 찾았습니다.

<input class="form-control" style="min-width: 100%!important;" type="text" />

당신은 단지 오버라이드 (override) 할 필요가 분 너비 설정을 100 % 및 중요한 결과는 이것이다 :

If you don't apply it, you will always get this:

---

In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):

content-box

This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

border-box

The width and height properties include the content, the padding and border, but not the margin."

---

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Compatibility for this CSS is good.

---

just add:

width: 100% !important;

---

What about?

    input[type="text"] {
          max-width:none;
   }

일부 css 파일이 문제를 일으키는 지 확인합니다. 기본적으로 부트 스트랩은 전체 너비에 걸쳐 표시됩니다. 예를 들어 MVC 디렉토리에서 Content는 site.css이고 너비를 제한하는 정의가 있습니다.

input,select,textarea {
max-width: 280px;}

---

.container-fluid뷰포트의 전체 너비에 걸쳐 부모로 전체 너비를 사용하려면을 사용하십시오 .

참고 URL : https://stackoverflow.com/questions/11232627/perfect-100-width-of-parent-container-for-a-bootstrap-input