부트 스트랩 모달에서 텍스트 영역 너비를 100 %로 설정

부트 스트랩 모달에서 텍스트 영역 너비를 100 %로 설정

---

가능한 모든 방법을 시도했지만 성공하지 못했습니다.

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div> 

사용 가능한 모든 공간을 포함하도록 modal-body div의 텍스트 영역을 만드는 방법 = 너비 100 %?

---

min-width: 100%텍스트 영역의 스타일에 추가해보십시오 .

<textarea class="form-control" style="min-width: 100%"></textarea>

---

내가 옳게 이해한다면 이것이 당신이 찾는 것입니다.

.form-control { width: 100%; }

JSFiddle 데모를 참조하십시오 .

---

또한 단순히 속성을 추가 할 수 있습니다 row="number of rows"와 cols="number of columns"같은

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

이렇게하면 style="min-height: 100%"100 % 또는 80 %와 매우 유사한 텍스트 영역의 행 수 와 min-width: 50%너비 등 이 늘어납니다 . 또한 텍스트 영역 row=7의 높이와 cols=50너비를 변경합니다.

---

제공된 솔루션으로 문제가 해결됩니다. 그러나 textarea동일한 스타일의 다른 모든 요소 에도 영향을 미칩니다 . 이 문제를 해결하고 좀 더 구체적인 선택기를 만들었습니다. 침략적인 변화를 막기 위해 제가 생각해 낸 것입니다.

.modal-content textarea.form-control {
    max-width: 100%;
}

이 선택자는 공격적으로 보일 수 있습니다. 그것은 textarea모달 자체의 콘텐츠 영역으로 제한하는 데 도움이됩니다 .

또한 min-width위에 제시된 솔루션은 기본 부트 스트랩 모달에서 작동하지만 angular-ui-bootstrap 모달과 함께 사용할 때 문제가있었습니다.

---

나는 같은 문제가 있었다. 이 코드를 텍스트 영역의 스타일 안에 추가하여 수정했습니다.

resize: vertical;

여기 에서 부트 스트랩 참조를 확인할 수 있습니다.

---

.NET / MVC 프로그래밍을 처음 접했지만 Site.css 파일 (MVC의 Content 폴더 아래)이 Bootstrap CSS에 대한 사이트 수준 재정의이므로 휴대용 및 비 -파괴적인 방식 (예 : 시스템에서 Bootstrap을 업데이트 할 때 site.css 변경 사항을 쉽게 저장하고 다시 적용 할 수 있습니다.)

Bootstrap 3.0.0에서 Site.css에는 다음과 같은 스타일 설정이 있습니다.

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

다른 블로그에서는이 280px 너비가 100 % 너비 입력보다 UI가 더보기 좋게 보이도록하기 위해 출시일 근처에 서둘러 추가되었다고 제안했습니다. 다행히도 사이트 파일의 "보이는"위치에 배치되어 눈에 띄었습니다.

세 가지 입력 유형 모두에 대해 너비 설정을 변경하거나 다른 입력 유형을 그대로 두려면 텍스트 영역을 꺼내서 자체 설정을 지정하십시오.

ReferenceURL : https://stackoverflow.com/questions/24584779/set-textarea-width-to-100-in-bootstrap-modal