Info-Box mit CSS - Bootstrap - Hervorragende Bibliothek

Ich benutze Bootstrap, um eine Info (Gefahr, tatsächlich) Box, und ich möchte das Entfernen-Symbol dort setzen. Aber das Problem ist, dass das Symbol nicht wirklich in der Mitte der Infobox ist. Irgendwelche Hilfe?Info-Box mit CSS - 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>

Quelle

2016-07-22 Mark

Versuchen Sie, diese

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

Quelle

2016-07-22 08:29:54

Das ist wirklich schön ist. Vielen Dank. Was ist die "×" obwohl? – Mark

sein Unicode-Zeichen 'MULTIPLICATION SIGN' (U + 00D7) –

Statt glyphicon in einem span-Tag einfach diesen Code verwenden unter der Verwendung von: -

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

Es wird definitiv funktionieren !! Machen Sie lieber einen Anchor, wenn Sie einen Anchor-Tag für einen Ablehnungszweck verwenden. :)

Ps: Wenn die X-Position nach links ändert, dann Anker-Tag unterhalb des Textes .. !!

Quelle

2016-07-22 08:51:12

Ich werde das ausprobieren. Wie lautet der neue Code? Kannst du es mir bitte erklären? Vielen Dank. – Mark

Sie können the position property für den Alarm-Block und das Symbol im Inneren verwenden:

Elemente, die relativ zueinander positioniert sind, werden nach wie vor in den normalen Fluss der Elemente in dem Dokument angesehen werden. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus der Strömung genommen und nimmt somit keinen Platz ein, wenn andere Elemente platziert werden. Das absolut positionierte Element wird relativ zum nächsten positionierten Vorgänger positioniert (nicht statisch).

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

Quelle

2016-07-23 08:29:34

Info-Box mit CSS - Bootstrap

Antwort

Verwandte Themen