부트 스트랩 모달을 더 넓게 만들려고

부트 스트랩 모달을 더 넓게 만들려고

---

이 코드를 사용하고 있지만 모달이 너무 얇습니다.

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

이것은 다음과 같습니다.

어떻게 그 모달을 더 넓게 만들 수 있습니까? 이상적으로는 현재 너무 얇기 때문에 너비의 두 배 정도가 좋을 것입니다.

---

부트 스트랩 용으로 최소화되지 않은 CSS를 항상 편리하게 사용하여 구성 요소에 어떤 스타일이 있는지 확인한 다음, LESS를 사용하지 않고 믹스 인 등을 덮어 쓰지 않는 경우 CSS 파일을 생성 한 다음

이것은 768px 이상의 기본 모달 CSS입니다.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

그들은 modal-lg더 큰 너비에 대한 클래스가 있습니다.

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

600px 크기의 두 배와 유동적 인 무언가가 필요한 경우 부트 스트랩 CSS 후에 CSS에서 이와 같은 작업을 수행하고 해당 클래스를 모달 대화 상자에 할당하십시오.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

데모 : http://jsbin.com/yefas/1

---

몇 가지 유형의 모달에만이 솔루션이 필요한 경우 style="width:90%"속성을 사용하십시오 .

예:

div class="modal-dialog modal-lg" style="width:90%"

참고 :이 특정 모달 만 변경됩니다.

---

시도해 볼 수 있습니다.

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

.modal-wide를 클래스에 추가하십시오.

참고 URL : https://stackoverflow.com/questions/25859255/trying-to-make-bootstrap-modal-wider