Bootstrap - 带有进度条的自定义警报

Question

我正在尝试自定义 bootstrap 3.3.7 alert 类，以添加进度条和内联项来实现这样的目的（虚线只是为了证明项目是对齐的):

但是，我无法将右侧部分底部的进度条设置为 100% 的 width。另外，我无法将左侧部分的height 调整为100% 并调整中间的图标。

我不确定我是否使用了正确的 css 策略，但这是我目前所做的：

/* !important are just used to overide the bootstrap css in the snippet */
.alertContainer {
  border-radius: 0 !important;
  border-width: 0 !important;
  padding: 0 !important;
  height: auto !important;
  position: absolute !important;
  bottom: 15px !important;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  width: 480px !important;
}

.leftPart {
  display: inline-block !important;
  height: 100% !important;
  width: 32px;
  font-size: 22px;
  background-color: #31708f;
  color: #d9edf7;
}

.leftPartContent {
    padding: 0 5px;
}

.rightPart {
  display: inline-block;
  height: 100%;
  width: 438px;
}

.rightPartContent {
  display: flex;
  align-items: center;
}

.close {
  position: absolute !important;
  right: 15px !important;
}

.progress {
  margin-bottom: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 5px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:600px; width:600px;">
  <div class="alertContainer alert alert-info" role="alert">
      <div class="leftPart">
        <span class="leftPartContent glyphicon glyphicon-info-sign"></span>
      </div>
      <div class="rightPart">
          <div class="rightPartContent">
              <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <div>
                  <span><strong>2018-15-06, 1:29 PM</strong></span><br>
                  <span>Hello world!</span>
              </div>
          </div>
          <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
          </div>
      </div>
  </div>
</div>

Answer 1

/* !important are just used to overide the bootstrap css in the snippet */
.alertContainer {
    border-radius: 0 !important;
    border-width: 0 !important;
    padding: 0 !important;
    height: auto !important;
    position: absolute !important;
    bottom: 15px !important;
    left: 0;
    right: 0;
    margin: 0 auto !important;
    width: 480px !important;
    display: table;
}

.leftPart {
    text-align: center;
    width: 55px;
    font-size: 22px;
    height: 75px;
    background-color: #31708f;
    color: #d9edf7;
    display: table-cell;
    vertical-align: middle;
}

.rightPart {
    vertical-align: middle;
    display: table-cell;
    width: 438px;
}

.close {
    position: absolute !important;
    right: 15px !important;
}

.progress {
    margin-bottom: 0 !important;
    bottom: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 5px !important;
    position: absolute;
    border-radius: 0;
}

button.close {
    line-height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:600px; width:600px;">
<div class="alertContainer alert alert-info" role="alert">
    <div class="leftPart">
        <span class="glyphicon glyphicon-info-sign"></span>
    </div>
    <div class="rightPart">

        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="col-sm-12">
            <span><strong>2018-15-06, 1:29 PM</strong></span><br>
            <span>Hello world!</span>
        </div>

        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
        </div>
    </div>
</div>
</div>

你应该把你的 css 放在 bootstrap 之后，并且 !important 不是必需的