2014-03-30 2 views
0

모달 창이 있습니다. 이 창안에는 두 개의 기둥이 있습니다. 하나의 열에는 체크 박스 목록이 포함됩니다. 다른 열은 그림과 일부 텍스트를 포함합니다. 그림과 텍스트가있는 오른쪽 열에는 BS 문서 http://getbootstrap.com/css/#grid-nesting에 나와있는 것처럼 중첩 된 열을 사용하여 그림과 텍스트를 한 줄에 배치하고 싶습니다. 이제 그들은 겹쳐 쌓여 있습니다. 이유는 모달 윈도우의 너비일까요? 왜냐하면 html 코드는 문서와 비슷하기 때문입니다. 그러나 그것은 작동하지 않습니다.부트 스트랩의 모달 창 안에 중첩 된 열 사용

enter image description here

나는 이런 식으로 뭔가가 필요합니다

enter image description here

이 조금 더 넓은 모달 창을 만들 필요 할 수 있습니까?

코드는 다음과 같습니다

<!-- Modal --> 
<div class="modal fade" 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 class="modal-title" id="myModalLabel">Sed at dignissim mauris?</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-lg-6"> 
          <div class="checkbox"> 
           <label> 
            <input type="checkbox"> Suspendisse in cursus leo, a 
           </label> 
          </div> 
          <div class="checkbox"> 
           <label> 
            <input type="checkbox">Sed ligula elit, lacinia eget pretium 
           </label> 
          </div> 
          <div class="checkbox"> 
           <label> 
            <input type="checkbox"> Phasellus fermentum fringilla orci 
           </label> 
          </div> 
          <div class="checkbox"> 
           <label> 
            <input type="checkbox"> Mauris interdum, sem non 
           </label> 
          </div> 
         </div> 
         <div class="col-lg-6"> 
          <div class="row"> 
           <div class="col-lg-4"> 
            <img src="Images/testimage.png" /> 
           </div> 
           <div class="col-lg-9"> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Ut lobortis arcu sit amet commodo suscipit. Nulla fringilla velit erat, 
            eget tristique elit ultrices eget. Sed cursus nunc in pretium scelerisque. 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

내가 열 문제를 해결하고 지금 enter image description here

내가 그것을 어떻게 윅스 수 모달 창 너비에 문제가 있나요?

답변

1

12 열 격자를 사용하고 있다고 가정하므로 중첩 할 때 열이 12 개 이하가되어야합니다. 만약 당신이 'col-lg-4'와 'col-lg-9'를 사용한다면 13 번 중 하나를 줄이면됩니다.

+0

예. 고맙습니다. 내 잘못입니다. 나는 정확하지 않았습니다. 그러나 모달 창 너비에 또 다른 문제가 있습니다. 어떻게 해결할 수 있습니까? 나는 초기 게시물을 업데이 트했습니다 (사진 추가) 감사합니다. –

+1

css를 변경하고 더 넓게 만들어야합니다. – DanV

+0

'.modal-dialog { width : 600px; 여백 : 30px 자동; } 'css code,하지만 600을 800으로 변경하면 아무 일도 일어나지 않습니다. –

관련 문제