在与多行对齐消息之前使用伪引导警报消息

Question

我有带图标的Bootstrap 3警报。我使用图标字体来维护图标。当警报消息长度用一行代表时，我没有问题，但是当它超出一行时，我遇到了图标对齐的问题。下面的屏幕截图说明了问题：

我需要什么有，在第二个框，栗色行应启动和包装盒上的水平边界和文本将是在右边结束。换句话说，随着文本行数的增加，栗色边框的高度也增加，图标垂直对齐保持在中间。

下面是HTML：

<div class="alert alert-warning"> 
     <h4>This property contains system-sensitive properties. Do not use it unless you are well aware of their requirements and results. </h4> 
</div> 

这里是有关`DIV警告所有的CSS规则：

.alert-warning { 
     padding-left: unset; 
    } 

    .alert { 
     padding: 0 5px; 
    } 

    .alert-warning { 
     background-color: #F8AA5D; 
     border-color: #f7864e; 
     color: #795548; 
    } 

    .alert { 
     border: 1px solid transparent; 
     border-radius: 4px; 
    } 

    .alert, .thumbnail { 
     margin-bottom: 20px; 
    } 
.alert-warning:before { 
    display: inline-block; 
    font-size: 320%; 
    font-family: fox; 
    text-align: center; 
    padding: 0 10px; 
    vertical-align: middle; 
    border-right: 5px solid; 
    margin: 0 10px; 
.alert-warning:before { 
    content: "\e817"; 
    color: #772953; 
    text-shadow: 0 1px 5px rgba(185,74,72,.79); 
} 

这是h4 CSS：

.alert h4, .alert h5 { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
.alert h4 { 
    color: inherit; 
} 

.alert h4 { 
    margin-top: 15px!important; 
} 

Answer 1

这可能不是你所追求的，因为它不一定是'bootstrap'...但是有时框架像引导（a尽管它们很棒）会使最简单的事情复杂化。

您所描述的是使用flexbox的理想方案。下面的示例不使用引导类，只使用一些简单的Flexbox CSS。您的边框将与文本一起增长，因为它是该容器的一部分。而且，由于我们使用的是flexbox，所以小型邮件可以轻松地在警报中垂直居中。

我在这个例子中使用了FontAwesome图标，因为它很容易包含库。你可以很容易地将它与你的图标互换。

2个示例在下面的代码片段中。一条短消息和一条长消息。

.customAlert { 
 
    display: flex; 
 
    align-items: center; 
 
    border: 1px solid #ddd; 
 
    justify-content: center; 
 
    margin-bottom: 12px; 
 
} 
 

 
.customAlertIcon { 
 
    padding: 4px; 
 
    flex-shrink: 1; 
 
} 
 

 
.customAlertMsg { 
 
    padding: 4px; 
 
    border-left: 2px solid #000; 
 
    flex-grow: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="customAlert"> 
 
    <div class="customAlertIcon"> 
 
    <i class="fa fa-warning fa-2x"></i> 
 
    </div> 
 
    <div class="customAlertMsg"> 
 
    This is an alert message. 
 
    </div> 
 
</div> 
 

 
<div class="customAlert"> 
 
    <div class="customAlertIcon"> 
 
    <i class="fa fa-warning fa-2x"></i> 
 
    </div> 
 
    <div class="customAlertMsg"> 
 
    This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. 
 
    </div> 
 
</div>