Bootstrap模式添加文本

Question

我正在尝试添加文字dynamically。请先看看我的剧本。

<id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Progress</h4>
          </div>
          <div class="modal-body">
            <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar"
      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">Please Wait</div>
    </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

我有这个

$(".progress").html("<p class='pesanberhasil'>Upload File Berhasil</p>");

这是我的CSS

p.pesanberhasil
{
    color: red;
    text-align: center;
    font-size: 20px;
}

此部分<p class='pesanberhasil'>Upload File Berhasil</p>出现。但是文字不是fit这是截图

[

抱歉我的英语不好。

这是我的小提琴

https://jsfiddle.net/c0b2kbmr/

好。我解决了这个问题。

$(".progress").remove();
$(".modal-body").html("<p class='pesanberhasil'>Upload File Berhasil</p>");

但我还有其他没有$(".progress").remove();

的解决方案

Answer 1

您是否已删除 p 标记上的边距？ Bootstrap在 p 标记中具有 10px 默认边距。也尝试小提琴这个

Answer 2

添加一些填充顶部和填充底部 <p class='pesanberhasil'>Upload File Berhasil</p>。 您可以在类-peanberhasil中添加填充属性。

填充：15px 0px 15px 0px;

Answer 3

减少 p.pesanberhasil 字体大小。 Bootstrap 3的 .progress-bar 默认高度大小 20px ， p 元素有填充，这会导致您的文字不适合 20px div。

Answer 4

您可以分别将.progress和.pesanberhasil的显示属性更改为table和table-cell，然后根据需要添加填充。

.progress {
  display: table;
  width: 100%;
}

.pesanberhasil {
  color: red;
  text-align: center;
  font-size: 20px;
  padding: 10px 0;
  display: table-cell;
}

工作示例：

$(".progress").html("<p class='pesanberhasil'>Upload File Berhasil</p>");

.progress {
  display: table;
  width: 100%;
}
.pesanberhasil {
  color: red;
  text-align: center;
  font-size: 20px;
  padding: 10px 0;
  display: table-cell;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Progress</h4>
      </div>
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please Wait</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<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.6/js/bootstrap.min.js"></script>