2014-06-14 3 views
0

부트 스트랩 모달에 두 개의 열 레이아웃을 작성하려고합니다. 이 코드입니다 :비정상적으로 모달 동작

<div class="modal fade in" id="product-showcase-modal" tabindex="-1" role="dialog" aria-labelledby="product-showcase" aria-hidden="false" style="display: block;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <div class="container col-xs-12"> 
        <div class="row-fluid"> 
         <div class="col-xs-6"> 
          <img src="http://localhost/haya/img/hijabs/dark%20grey.jpg" id="product_image" width="200px" height="auto" style="display: inline;"> 
         </div> 
         <div class="col-xs-6"> 
          <h3 id="product_name">Dark Gray</h3> 

          <p id="new_price">$3.00</p> 
          <p style="text-decoration: line-through;" id="old_price">$4.35</p> 
          <button class="btn btn-warning">Add to cart</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

그리고 이것은 결과입니다 : 나는 이런 일이 왜 아무 생각이 enter image description here

. 누구든지이 문제를 해결할 수 있습니까?

UPDATE 1 : 은 내가 container 사업부에서 col-xs-12 클래스를 제거했다. 이제 컨테이너가 모달의 몸에 있지만 크기가 100 % (화면의 너비)입니다. 결과 : enter image description here

+0

. 이 질문과 대답을보십시오. 질문 : 대답 : http://stackoverflow.com/questions/11848258/is-it-possible-to-use-rows-and-spans-inside-modals-in-twitter-bootstrap – KnowHowSolutions

+0

@KnowHowSolutions 아니, 나 'container-div '클래스에서'col-xs-12' 클래스를 제거하려고했습니다. 그런데 컨테이너가 너비 100 % (화면 너비)를 차지했습니다. 지금 어떻게 해결 해야할지 모르겠습니다! :/ –

+0

다른 솔루션에서 clearfix를 추가 했습니까? 귀하의 모달 - 몸 클래스와 함께 넣어보십시오. – KnowHowSolutions

답변

1

모달 - 바디에 clearfix를 추가하기 만하면됩니다. 이렇게하면 컨테이너가 완전히 확장되지 않는 부유물 문제가 해결됩니다.

바이올린 : http://jsfiddle.net/52VtD/6310/ clearfix없이 플로트 문제처럼 보인다

<div class="modal-body clearfix"> 
+0

어떻게이 문제가 해결됩니까? –

+1

http://stackoverflow.com/questions/8554043/what-is-clearfix – KnowHowSolutions

+0

감사합니다. :)))))))))) –

관련 문제