Html Bootstrap 警报左侧的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26898314/
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
Icon on left of Bootstrap alert
提问by dx_over_dt
I'm trying to put a glyphicon on the left side of an alert div. When the alert's text is more than one line, I want the new line to start where the first line's text started, rather than under the glyphicon.
我正在尝试在警报 div 的左侧放置一个字形。当警报的文本不止一行时，我希望新行从第一行文本开始的地方开始，而不是在字形下方。
If I use divs for the icon and message, the icon sits on top of the message. If I use spans, the message follows the icon and wraps under it.
如果我对图标和消息使用 div，则图标位于消息的顶部。如果我使用跨度，消息会跟随图标并包裹在它下面。
Assume the glyphicon's width is not known ahead of time, so using the ::first-lineselector isn't viable without something more clever than I. I also don't want to put the glyphicon in a .col-*because .col-*-1is way too large. .pull-leftand .pull-righthaven't seemed to have an effect, regardless of whether I use a div or a span for the glyphicon and message.
假设字形的宽度事先不知道，所以::first-line如果没有比我更聪明的东西，使用选择器是不可行的。我也不想把字形放在 a 中，.col-*因为.col-*-1它太大了。 .pull-left并且.pull-right似乎没有效果，无论我对字形和消息使用 div 还是 span。
The easiest solution is to use a table (le gasp!), but I'm trying to avoid that.
最简单的解决方案是使用表格（le gasp！），但我试图避免这种情况。
I'm also still deciding whether I want the icon to be at the top left or middle left of the alert. Even with a table, I was having trouble centering the icon vertically.
我还在决定是希望图标位于警报的左上角还是左中角。即使有一张桌子，我也无法将图标垂直居中。
What I have (pretty simple):
我有什么（很简单）：
<div class="col-sm-9 col-md-10">
<div class="col-xs-12 alert alert-warning">
<div class="glyphicon glyphicon-exclamation-sign"></div>
<div>My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>
</div>
<div>
Link to JSFiddle
链接到JSFiddle
Any ideas?
有任何想法吗？
采纳答案by dx_over_dt
There is now a cleaner (and better best practices imo) way to do this. (Updated jsfiddlefrom OP)
现在有一种更干净（和更好的最佳实践 imo）的方法来做到这一点。（从 OP更新了jsfiddle）
.alert {
display: flex;
flex-direction: row;
}
.alert .glyphicon {
margin-right: 8px;
align-self: center; // if you want it centered vertically
}
Virtually all browsers support flex box now. https://caniuse.com/#feat=flexbox
现在几乎所有浏览器都支持 flex box。 https://caniuse.com/#feat=flexbox
As an aside, bootstrap 4 no longer does glyphicons natively (though there's nothing stopping you from including the glyphicons library manually--or more commonly nowadays, fontawesome), but it does include display classes natively. You can do all this without any CSS. Bootstrap 4 jsfiddle
顺便说一句，bootstrap 4 本身不再包含字形（尽管没有什么可以阻止您手动包含字形库 - 或者现在更常见的是 fontawesome），但它确实包含本地显示类。你可以在没有任何 CSS 的情况下完成所有这些。 引导程序 4 jsfiddle
<div class="container">
<div class="card bg-light mt-4">
<div class="card-header">
<h3>
Bootstrap 4
</h3>
</div>
<div class="card-body">
<div class="alert alert-warning d-flex flex-row">
<i class="fas fa-fw fa-exclamation-circle mr-3 align-self-center"></i>
<div>
My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
</div>
</div>
<div class="alert alert-info d-flex flex-row">
<i class="fas fa-fw fa-info-circle mr-3 mt-1"></i>
<div>
My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
</div>
</div>
</div>
</div>
</div>
To not center the icon vertically, simply remove the icons align-self-centerclass. You might need to fiddle with the top margin to align it well with the text using the mt-*classes. mt-1worked well for this example.
要不垂直居中图标，只需删除图标align-self-center类。您可能需要摆弄上边距以使其与使用mt-*类的文本对齐。 mt-1在这个例子中效果很好。
回答by blurfus
Try adding this to your CSS (you may need to be more specific than this)
尝试将其添加到您的 CSS（您可能需要比这更具体）
.alert .glyphicon{
display:table-cell;
}
.alert div,
.alert span{
padding-left: 5px;
display:table-cell;
}
回答by Alix Axel
Should be pretty straightforward with Bootstrap 4:
Bootstrap 4 应该非常简单：
<div class="alert alert-warning">
<div class="row"> <!-- add no-gutters to make it narrower -->
<div class="col-auto align-self-start"> <!-- or align-self-center -->
<div class="glyphicon glyphicon-exclamation-sign"></div>
</div>
<div class="col">
My message here. Lots of text for several lines!
My message here. Lots of text for several lines!
My message here. Lots of text for several lines!
My message here. Lots of text for several lines!
</div>
</div>
</div>
No custom CSS necessary. :)
不需要自定义 CSS。:)
回答by b_m
This is a pretty simple solution using the overflow property:
这是一个使用溢出属性的非常简单的解决方案：
.alert .glyphicon{
float:left;
margin-right:9px;
}
.alert div{
overflow:hidden;
}
回答by epascarello
Another way would be to position the icon
另一种方法是定位图标
HTML:
HTML：
<div class="lftPad glyphicon glyphicon-exclamation-sign">My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>
CSS:
CSS：
.lftPad { margin-left:25px; }
.lftPad.glyphicon-exclamation-sign:before{
position: absolute;
margin-left: -20px;
}
