부트 스트랩 모달 너비를 늘리는 방법은 무엇입니까?

부트 스트랩 모달 너비를 늘리는 방법은 무엇입니까?

---

나는 이것을 시도했지만 잘못되었습니다

여기 CSS입니다

body .modal-ku {
width: 750px;
}

그리고 여기에 실패한 결과가 있습니다

---

코드에서 modal-dialogdiv에 대해 다른 클래스를 추가하십시오 modal-lg.

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

또는 모달 대화 상자를 중앙에 배치하려면 다음을 사용하십시오.

.modal-ku {
  width: 750px;
  margin: auto;
}

---

가장 쉬운 방법은 modal-dialogdiv에서 인라인 스타일이 될 수 있습니다 .

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>

---

나의 경우에는,

1. 모달에 정적 너비를 부여하면 응답 성이 떨어집니다.
2. modal-lg클래스는 넓은 충분하지 않았다.

그래서 해결책은

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

그리고 대신에 이전의 클래스를 사용하는 modal-lg클래스

---

Bootstrap 3에서는 모달 대화 상자를 변경해야합니다. 따라서이 경우 modal-dialog가있는 곳에 modal-admin 클래스를 추가 할 수 있습니다.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}

---

In Bootstrap, the default width of modal-dialog is 600px. But you can explicitly change its width. For instance, if you would like to maximize its width to the value of your choice, 800px for instance, you do as following:

.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

Note: This change sets to all modal dialog you use in your application. Also, my suggestion is it is best to have your own CSS rules defined and not to touch the core of the framework.

If you only want it to be set for specific modal dialog, use your own catchy class name as modal-800 whose width is set to 800px, as following:

HTML

<div class="modal">
   <div class="modal-dialog modal-800">
      <div class="modal-content">

      </div>
   </div>
</div>

CSS

.modal-dialog.modal-800 {
    width: 800px;
    margin: 30px auto;
}

Likewise, you can have class name as based on the width size like modal-700 whose width is 700px.

Hope it's helpful!

---

I had a large grid that needed to be displayed in the modal and just applying the width on body was not working correctly as table was overflowing though it had bootstrap classes on it. I ended up applying same width on modal-body and modal-content :

<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="width:980px;">
            <div class="modal-header">
                <h5 class="modal-title" id="">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body" style="width:980px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>

                </div>
            </form>
        </div>
    </div>
</div>

<!--end::Modal-->

---

If you want to keep the modal responsive use % of width instead of pixels. You can do it in-line (see below) or with CSS.

<div class="modal fade" id="phpModal" role="dialog">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">HERE YOU TITLE</h4>
                    </div>
                    <div class="modal-body helpModal phpModal">
                        HERE YOUR CONTENT
                    </div>
                </div>
            </div>
        </div>

If you use CSS, you can even do different % for modal-sm and modal-lg.

---

I suppose this happens due to the max-width of a modal being set to 500px and max-width of modal-lg is 800px I suppose setting it to auto will make your modal responsive

---

Actually, you are applying CSS on modal div.

you have to apply CSS on .modal-dialog

For example, see the following code.

<div class="modal" id="myModal">
 <div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
      <div class="modal-content">
           Lorem Ipsum some text...content 

        </div>
     </div>
 </div>

Bootstrap also provides classes for setting div width.

For small modal use modal-sm

And for large modal modal-lg

---

modal-lg 및 modal-xl 클래스 중에서 선택하거나 사용자 정의 너비를 원하는 경우 인라인 CSS로 max-width 속성을 설정할 수 있습니다. 예를 들면

<div class="modal-dialog modal-xl" role="document"> 또는 <div class="modal-dialog" style="max-width: 80%;" role="document">

---

.your_modal {
    width: 800px;
    margin-left: -400px; 
 }

여백 왼쪽 값은 모달 너비의 절반입니다. 나는 이것을 Maruti Admin 테마와 함께 사용하고 있습니다..modal-lg .modal-sm

참고 URL : https://stackoverflow.com/questions/34014891/how-to-increase-bootstrap-modal-width