CSSを使用した情報ボックス - ブートストラップ

ブートストラップを使用してinfo（danger、actualy）ボックスを作成しています。削除アイコンをそこに配置したいと思います。しかし、問題はアイコンがインフォボックスの真中にないということです。助けてください？CSSを使用した情報ボックス - ブートストラップ

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

出典

2016-07-22 Mark

単に以下のコードを使用この

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

出典

2016-07-22 08:29:54

。ありがとう。しかし、 "×"とは何ですか？ – Mark

そのUnicode文字 'MULTIPLICATION SIGN'（U + 00D7） –

の代わりに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の位置が左に変わったらアンカータグをテキストの下に置いて.. !!

出典

2016-07-22 08:51:12

私はそれを試してみます。しかし、新しいコードは何ですか？私にそれを説明してもらえますか？ありがとう。 – Mark

アラートブロックと内部のアイコンのthe position propertyを使用することができます。比較的に配置されている

要素はまだドキュメント内の要素の通常の流れであると考えられています。対照的に、絶対的に配置された要素は、流れから取り出され、したがって、他の要素を配置するときに空間を占有しない。絶対配置された要素は、最も近い位置にある祖先（非静的）に対して配置されます。本当にうれしいです

@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; 
 
}

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

出典

2016-07-23 08:29:34

CSSを使用した情報ボックス - ブートストラップ

答えて

関連する問題