Bootstrap Circle Modal

Question

我正在試圖在圓形窗體中創建一個bootstrap模態。已經創建了一個，但我的問題是我如何可以響應式地插入圓形模式中的文本？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<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.7/js/bootstrap.min.js"></script> 
 

 
<style> 
 
    .modal-content { 
 
    background-color: #0099FF; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: auto; 
 
    padding-top: 100%; 
 
    } 
 
</style> 
 

 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Modal 
 
</button> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Flex box會幫助你，並且我刪除了padding-top推動內容在底部。對於身高我已使用height:100vw和max-height:600px，這將使框正確的圓形狀。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<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.7/js/bootstrap.min.js"></script> 
 

 

 
<style> 
 
    .modal-content { 
 
    background-color: #0099FF; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100vw; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    max-height: 600px; 
 
    } 
 
</style> 
 

 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Modal 
 
</button> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

追加一個div來model-content並給它position:absolute並將其定位是在中心

<style> 
    .modal-content { 
     background-color: #0099FF; 
     position: relative; 
     border-radius: 50%; 
     width: 100%; 
     height: auto; 
     padding-top: 100%; 
    } 
    #text { 
    position: absolute; 
    top:50%; 
    left:45%; 
    } 
</style> 


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Modal 
</button> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div id="text">Lorem ipsum</div> 
     </div> 
    </div> 
</div> 

下面是一個例子：http://www.bootply.com/kBT3elyYFV