我試著將警告框居中并設置為80%的大小，但是它對文本中心類不起作用。

<div class="text-center">

    <div class="alert alert-info" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong>  It's just an alert... </div> 

</div>

類文本中心如預期的那樣運行。包裝。引導網格中的警報還為您提供了限制通知總寬度的能力。

仔細檢查你沒有額外的CSS可能會覆蓋你的代碼。這是在http://www.bootply.com/MFv1HMC0G7測試的

如果要將整個警報居中對齊，請使用居中塊，而不是文本居中。

<div class="alert alert-info center-block" style="width: 80%;" role="alert"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Hey!</strong>  It's just an alert... </div>

如果要將警報內的文本居中對齊，請使用:

<div class="alert alert-info" style="width: 80%;" role="alert">
    <p class="text-center">
     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>        <strong>Hey!</strong>  It's just an alert... 
    </p>
</div>

為了在不添加額外容器的情況下將警報居中對齊，我定制了Bootstrap alert類，如下所示。

.alert {
  left: 0;
  margin: auto; // Centers alert component
  position: absolute; // So that it will display relative to the entire page
  right: 0;
  text-align: center; // Centers 'Alert Test' text
  top: 1em;
  width: 80%;
  z-index: 1; // Displays over app and bootstrap Navbar
}

如果您不想直接覆蓋Bootstrap中的基本警報類，您可以將該類重命名為您喜歡的任何名稱，并引用該類。

為此，我使用React來顯示我的組件，并像這樣包含它們:

警報. jsx

<div className="alert alert-primary alert-dismissable fade show" role="alert">
  Alert Test
  <button className="close" type="button" data-dismiss="alert">
    <span>&times;</span>
  </button>
</div>

App.jsx

<>
  <Alerts />
  <Navigation />
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/login" component={LoginPage} />
  </Switch>
</>

Alerts.jsx組件被導入到App.jsx組件中，結果如下所示。

在Bootstrap 5中，使用d-block和文本中心。

<div class="alert alert-info d-block text-center" role="alert">
     Centered Text                
 </div>