在與多行對齊消息之前使用僞引導警報消息

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>