Twitter 부트 스트랩 모달 박스의 기본 너비를 어떻게 변경할 수 있습니까? <div

나는 다음을 시도했다.

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

그리고이 자바 스크립트 :

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

결과는 내가 기대 한 것이 아닙니다. 왼쪽 상단 모달은 화면 중앙에 위치합니다.

누구든지 나를 도울 수 있습니까? 다른 사람이 이것을 시도했습니다. 나는 그것이 원치 않는 일이 아니라고 가정합니다.

답변

최신 정보:

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

원래 답변 (Bootstrap <3)

JS / jQuery를 사용하여 변경하려는 이유가 있습니까?

CSS만으로 쉽게 할 수 있으므로 문서에서 스타일을 지정할 필요가 없습니다. 자신의 사용자 정의 CSS 파일에서 다음을 추가하십시오.

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

귀하의 경우 :

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

선택기 앞에 본문을 두는 이유는 기본값보다 우선 순위가 높습니다. 이 방법으로 사용자 정의 CSS 파일에 파일을 추가 할 수 있으며 Bootstrap을 업데이트하지 않아도됩니다.

답변

CSS만으로 반응하게하려면 다음을 사용하십시오.

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

참고 1 : .large수업을 사용했습니다 . 일반적 으로이 작업을 수행 할 수도 있습니다.modal

참고 2 : Bootstrap 3에서 음수 여백은 더 이상 필요하지 않을 수 있습니다 (개인적으로 확인하지 않음).

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

참고 3 : 부트 스트랩 3 및 4에는 modal-lg클래스가 있습니다. 따라서 이것으로 충분할 수 있지만, 반응 형으로 만들려면 여전히 Bootstrap 3에 제공된 수정 프로그램이 필요합니다.

일부 응용 프로그램 fixed모달이 사용되는 경우 시도 할 수 있습니다 width:80%; left:10%;(수식 : 왼쪽 = 100-너비 / 2)

답변

Bootstrap 3을 사용하는 경우 허용 된 답변에 표시된 것과 같이 모달 div가 아닌 모달 대화 상자 div를 변경해야합니다. 또한 Bootstrap 3의 반응성을 유지하려면 미디어 쿼리를 사용하여 재정의 CSS를 작성하는 것이 중요합니다. 따라서 작은 장치에서는 모달이 전체 너비가되도록합니다.

다른 너비로 실험하려면 이 JSFiddle 을 참조하십시오 .

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

답변

상대 디자인을 깨뜨리지 않는 것을 원한다면 다음을 시도하십시오.

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto;
}

@Marco Johannesen이 말했듯이 선택기 앞의 “본문”은 기본값보다 우선 순위가 높습니다.

답변

Bootstrap 3+에서 모달 대화 상자의 크기를 변경하는 가장 적절한 방법은 size 속성을 사용하는 것입니다. 아래는 예제이며, 클래스를 modal-sm따라 modal-dialog작은 모달을 나타냅니다. sm작은 값 , md중간 값 및 lg큰 값 을 포함 할 수 있습니다 .

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

답변

내용은 Bootstrap 3여기를 수행하는 방법이다.

modal-wideHTML 마크 업에 스타일을 추가합니다 ( Bootstrap 3 docs의 예제에 따라 ).

<div class="modal fade modal-wide" id="myModal" 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" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

다음 CSS를 추가하십시오.

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

오버라이드 (override) 할 필요가 없습니다 margin-left에 Bootstrap 3이 지금 중앙에 갈 수는.

답변

에서 부트 스트랩 3 당신이 필요로하는 모든이입니다

<style>
    .modal .modal-dialog { width: 80%; }
</style>

위의 답변의 대부분은 나를 위해 작동하지 않았습니다!

코드 스 니펫 표시

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</center>
스 니펫 확장