CSS Bootstrap 警报大小更改

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20230251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:07:47  来源:igfitidea点击:

Bootstrap Alert Size Change

csstwitter-bootstrapalert

提问by user2399308

Is there a way I could edit how far an alert could stretch across the page, so it doesn't go all the way across?

有没有办法可以编辑警报可以在页面上延伸多远,因此它不会一直穿过?

Here's an example of my alerts:

这是我的警报示例:

<div class="alert alert-success">Your first number was correct.</div>

采纳答案by Trevor

Using some CSS

使用一些 CSS

.alert {
   width:40%;    
}

Example

例子

http://www.bootply.com/96921

http://www.bootply.com/96921

The example above makes the alert width 40% of the container, or in this case the screen.

上面的示例使警报宽度为容器的 40%,或者在本例中为屏幕。

You can also set a fixed width.

您还可以设置固定宽度。

.alert {
   width:300px;    
}

回答by AlainIb

if you want that the alert is juste the size of the inner text :

如果您希望警报只是内部文本的大小:

.alert {
  display:inline-block;
}

回答by shinzou

Placing it in a rowand offsetting its coldid it for me.

将它放在 a 中row并抵消col它为我做到了。

<div class="row">
    <div class="alert alert-danger col-md-4 col-md-offset-4" align="center">

    </div>
</div>

回答by cardamom

I think it would work to just take the code from the question

我认为只从问题中获取代码就行了

<div class="alert alert-success">

and add one of the column classes like this

并添加这样的列类之一

<div class="alert alert-success col-md-3">

Something like that worked for me anyhow, my exact code was

无论如何,这样的事情对我有用,我的确切代码是

<div class="alert alert-info alert-dismissible col-md-3" role="alert">

Made a nice small alert out of it just a bit bigger than a button.

用它制作了一个不错的小警报,只是比按钮大一点。

回答by MrD

If your alert is part of a .rowthen setting its class to include .col-lg-12will force it to span across its container.

如果您的警报是 a 的一部分,.row则将其类设置为 include.col-lg-12将强制它跨越其容器。