Question

我正在使用bootstrap制作一个信息（危险，实际）框，我想将删除图标放在那里。但问题是图标不在信息框的中间。有什么帮助吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="alert alert-danger alert-message" role="alert">
  <span class="glyphicon glyphicon-remove"></span>
    <p>
      <b>TEXT</b>
    </p>
</div>

Answer 1

试试这个

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

   
  
    
    <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times; &#88; &#120; &times;</a>
    You can use any of this character sign
  </div>
 
</div>
  
</body>
</html>

＆＃13;

Answer 2

不要在span标记内使用 glyphicon ，只需使用以下代码： -

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <b>Your text</b>
</div>

一定会有用!!而是使用锚标签作为解雇目的的习惯。 :)

Ps：如果x位置变为left，则将锚标记放在文本下面!! !!

Answer 3

您可以使用the position property作为警报栏和里面的图标：

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先（非静态）定位。

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.alert {
  position: relative;
}
.alert .glyphicon {
  position: absolute;
  right: 16px;
  top: 19px;
}

＆＃13;

<div class="alert alert-danger alert-message" role="alert">
  <span class="glyphicon glyphicon-remove"></span>
  <p>
    <b>TEXT 1</b>
  </p>
</div>

<div class="alert alert-success alert-message" role="alert">
  <span class="glyphicon glyphicon-remove"></span>
  <p>
    <b>TEXT 2</b>
  </p>
</div>

＆＃13;

信息框使用CSS - Bootstrap

3 个答案: