引導4警報有不需要的底部填充當不在容器中

我的問題是，當警報沒有放在容器內時，警報有不需要的底部填充。由於這是固定的，並且正在以自動爲中心，所以我不希望它在容器內。

繼承人我CSS：

#alert { 
     position: fixed; 
     bottom: 0; 
     left: 50%; 
     transform: translateX(-50%); 
    }

的jsfiddle例如：https://jsfiddle.net/81vhy56o/

如何解決？

來源

2017-08-25 kjdion84

它從'padding'即將來臨的'button' –

爲什麼會加倍警惕高度由於按鈕填充？ – kjdion84

您是否嘗試在#alert padding-bottom：0中添加？ – wahdan

添加你自己的類名爲.alert-dismissible .close類，並添加 padding-bottom:0它

.alert-dismissible .close{ 
    padding-bottom: 0; 
}

和#alert ID添加padding-bottom:0

#alert { 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    padding-bottom: 0; 
}

來源

2017-08-25 23:26:09 wahdan

如果檢查元素，你可以看到有一個margin不是padding。要修復它只需將類mb-0添加到<div class="alert"></div>這將使margin-bottom: 0 !important;，如果你不想任何填充，那麼你可以添加pb-0它。

#alert { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<head> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    </head> 
 
    <body> 
 
    <div id="alert" class="alert alert-warning alert-dismissible mb-0 pb-0"> 
 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
 
     Hi! I'm a test alert! 
 
    </div> 
 

 
    <!-- Optional JavaScript --> 
 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
    </body>

來源

2017-08-26 00:49:24 RBCunhaDesign

將類'mb-0'添加到警報div爲我解決了這個問題。謝謝。 – SuperShoot

引導4警報有不需要的底部填充當不在容器中

回答

相關問題