2017-06-24 11 views
0

こんにちは、パディングとマージン、フッタとヘッダスペースをブートストラップモーダルからすべて削除するにはどうしたらいいですか?私が見たいのは、私のコンテンツとまったく同じボディ修正です。 ありがとうございます。ブートストラップ3を使用していますか?私はヘッダーとフッターの要素を使用していません。モーダル、モーダルダイアログ、モーダルコンテンツ、モーダルのみです。これまでのところ私は次のようなことがありますが、私のコンテンツを取り囲む空間はまだあります。ブートストラップモーダルからすべてのパディングを削除する

.modal-body { 
    position: relative; 
    overflow-y: auto; 
    margin: 0 ; 
    padding: 0; 
} 
.modal-content{ 
    padding: 0; 
    margin: 0; 
} 

HTML

  <div class="modal fade" id="tpModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 
       aria-hidden="false"> 
       <div class="modal-dialog " role="document"> 
        <div class="modal-content"> 

         <div class="modal-body"> 
          <mycontent></mycontent> 
         </div> 

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

答えて

1

ソリューションはjqueryを使用してmodaltriggeredときcssプロパティを設定することです。

このため、shown.bs.modalイベントを処理する必要があります。

$('.modal').on('shown.bs.modal', function() { 
 
    $(".modal-body").css("padding",'0px'); 
 
    $(".modal-body").css("margin",'0px'); 
 
    $(".modal-dialog").css({ 
 
       'position': 'relative', 
 
       'display': 'table', 
 
       'overflow-y': 'auto',  
 
       'overflow-x': 'auto', 
 
       'width': 'auto', 
 
       'min-width': '10px' 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Button trigger modal --> 
 
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     Lorem lorem lorem 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

フィドルは、上記の固定幅は思わました。テキストを1つの単語に減らし、 – flexxxit

+0

@flexxxitを見て、私の答えを見てください。 –

関連する問題