Modal Footer-Ajax消息以模态页脚为中心

Question

我有一个带有<label></label>的模态页脚，它会在成功操作时显示消息。但是，属性是继承的，因此居中的风格不起作用。我正在使用Bootstrap 3.3.7

<div class="modal-footer">
    <label type="text" id="resultmessage" style="color: white; vertical-align:middle;"></label>
    <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>

Answer 1

添加更具体的CSS选择器以覆盖引导样式（默认情况下.modal-footer设置为text-align: right。）。

div.modal-footer {
  text-align: center;
}

此外，您可以将标签顺序切换到.modal-footer内的最后一个元素，如果您希望它位于按钮的右侧（为了可见性，将颜色更改为灰色）。

段：

div.modal-footer {
  text-align: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="modal-footer">
    <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
    <label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
</div>

如果您希望仅将信息集中在一起，您可以（根据您的利益调整价值）：

.modal-footer button {
  margin-top: -48px;
}

#resultmessage {
  display: inline-block;
  width: 100%;
  text-align: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="modal-footer">
  <label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
  <button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
  <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>

Answer 2

在我看来，使用标签作为没有标签的东西并不是很好的实践。我想让你想要这些信息（＆＃39;数据库更新＆＃39;）垂直对齐（你试图使用vertical-align - 它只适用于表格）。而不是使用标签，更好的是使用例如 span 。

我是这样做的：

https://codepen.io/Czeran/pen/BdWbjg

<强> HTML

<div class="modal-footer">
<span id="resultmessage">Database updated</span>
<div class="tools">
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
  </div>
  <span></span>
</div>

CSS（已编辑）

.modal-footer {
 position: relative;
 display: flex;


flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

#resultmessage {
  font-weight: bold;
}

.tools {
  position: absolute;
  right: 15px;
}