twitter-bootstrap 在 twitter bootstrap 中设置大小和中心警报框

Set size and center alert box in twitter bootstrap

提问by Vinny

I'm trying to center and set the size to 80%of an alert box, however it's not working with the class text-center.

我正在尝试将80%警报框居中并将大小设置为，但是它不适用于 class text-center。

 <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>

采纳答案by Robert

<div class="container-fluid">
    <div class="row">

        <div class="col-md-10 col-md-offset-1">
            <div class="alert alert-warning alert-dismissible fade in text-center" role="alert">
                <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
            </div>
        </div>

  </div>
</div>

The class text-centerfunctions as expected. Wrapping the .alertwithin the Bootstrap Grid also provides you the ability to restrict the total width of the notification.

该类text-center按预期运行。将 包裹.alert在 Bootstrap Grid 中还使您能够限制通知的总宽度。

Double-check that you don't have additional CSS that might be overriding your code. This was tested in Bootply: http://www.bootply.com/MFv1HMC0G7

仔细检查您是否没有可能覆盖您的代码的其他 CSS。这是在 Bootply 中测试的：http: //www.bootply.com/MFv1HMC0G7

回答by Lekhnath

Use center-blockinstead of text-centerwith alertif you want to center align the whole alert.

如果要居中对齐整个警报，请使用center-block代替text-centerwith alert。

<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> 

If you want to center align the text inside of alert use as:

如果要居中对齐警报内部的文本，请使用：

<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> 

回答by ppak10

To align the alert to the center without adding extra containers, I customized the Bootstrap alert class to look as follows.

为了在不添加额外容器的情况下将警报对齐到中心，我自定义了 Bootstrap 警报类，如下所示。

.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
}

If you don't want to directly override the base alertclass from Bootstrap you can rename the class to whatever you like and reference that class instead.

如果您不想直接alert从 Bootstrap覆盖基类，您可以将该类重命名为您喜欢的任何名称，并改为引用该类。

For this I used React to display my components and included them like this:

为此，我使用 React 来显示我的组件并像这样包含它们：

Alerts.jsx

警报.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

应用程序.jsx

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

The Alerts.jsxcomponent is imported into the App.jsxcomponent and the result looks something like this.

该Alerts.jsx组件被导入到App.jsx组件，结果看起来是这样的。