html - Bootstrap 圆模态

Question

我正在尝试以圆形形式创建引导模式。已经创建了一个，但我的问题是如何响应式地将文本插入圆模态的中间？

<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>