Использование сетки/строки в модальном

Я пытаюсь работать с сеткой Bootstrap 3, и я запускаю проблемы/путаницу при использовании ее с Modals.Использование сетки/строки в модальном

В основном, что я вижу, когда я добавляю строки в модальное тело, содержимое часто высыпается из модального тела. Так что лучший способ заставить модальное тело иметь свой собственный «контейнер», поэтому у него есть своя сетка. Я уже использую .container на главной части моей страницы, и я читал, что вы не должны вставлять .container или .container-fluid.

Что я ищу, это некоторые рекомендации или объяснение того, почему я вижу неожиданный рендеринг.

Должен ли я это сделать:

<div class="modal-body row"> 
    ... 
</div>

или это:

<div class="modal-body"> 
    <div class="row"> 
    .... 
    </div> 
</div>

или это:

<div class="modal-body"> 
    <div class="col-xs-12"> 
    .... 
    </div> 
</div>

Вот надуманный пример: (http://plnkr.co/edit/5vOppLmuRBqH3RAHfynT)

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <header class="container"> 
    <div class="row"> 
     <h1 class="text-center">This is the Header</h1> 
    </div> 
    <p class="col-xs-3">Header Info Right</p> 
    <p class="col-xs-9">Header Info Left</p> 
    </header> 
    <section class="container"> 
    <div class="row"> 
     <div class="col-xs-3"> 
     <ul> 
      <li>Col1</li> 
      <li>Col1</li> 
     </ul> 
     <div class="row"> 
      <div class="col-xs-2 col-xs-offset-4"> 
      <button type="button" class="btn btn-primary btn-sm pull-left" data-toggle="modal" data-target="#modal1"> 
       <span class="glyphicon glyphicon-new-window"></span> 
      </button> 
      <!-- Modal --> 
      <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog modal-sm"> 
       <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"> 
        <div class="col-xs-12"> 
         <hr/> 
         <hr/> 
         <div class="row"> 
         <h1 class="text-center">Modal for Col 1</h1> 
         </div> 
         <hr/> 
         <div class="row"> 
         <div class="col-xs-3"> 
          <ul> 
          <li>Modal Col1</li> 
          <li>Modal Col1</li> 
          </ul> 
         </div> 
         <div class="col-xs-6"> 
          <ul> 
          <li>Modal Col2</li> 
          <li>Modal Col2</li> 
          </ul> 
         </div> 
         <div class="col-xs-3"> 
          <div class="row"> 
          <ul> 
           <li>Modal Col3</li> 
           <li>Modal Col3</li> 
          </ul> 
          </div> 
         </div> 
         </div> 
        </div> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-6"> 
     <ul> 
      <li>Col2</li> 
      <li>Col2</li> 
     </ul> 
     </div> 
     <div class="col-xs-3"> 
     <ul> 
      <li>Col3</li> 
      <li>Col3</li> 
     </ul> 
     </div> 
    </div> 
    </section> 
    <footer class="container"> 
    <div class="row"> 
     <hr/> 
     <p class="col-xs-6">Footer Info Right</p> 
     <p class="col-xs-6">Footer Info Left</p> 
    </div> 
    </footer> 
</body> 

</html>

источник

2015-01-30 Jeff

Я думаю, что внутри modal-body вы должны иметь container-fluid>row>col-*

    <div class="modal-body"> 
        <div class="container-fluid"> 
        <div class="row"> 
         (columns and more nested row/cols here) 
        </div><!--/row--> 
        </div><!--/container-fluid--> 
        </div><!--/modal-body-->

Demo: http://bootply.com/sQbChOGPkS

источник

2015-01-31 17:21:56 ZimSystem

Это то, что я придумал тоже. Из того, что я читал, вложенные контейнеры не поддерживаются. Вот одно место, где упоминается следующее: https://github.com/twbs/bootstrap/commit/66f9c7d6d5de97965a119f6d5f4ad1704e8f789d. Из-за этого меня беспокоит это. Однако на данный момент это, по-видимому, единственный способ получить последовательный взгляд. – Jeff

Да, и эта проблема вложенных контейнеров разъясняется здесь: https://github.com/twbs/bootstrap/issues/15512 – ZimSystem

Использование сетки/строки в модальном

ответ

Смежные вопросы