Wie kann man einen Artikel unter Gitter-System (Größe)

Ich lerne gerade html, css, boostrap. Ich möchte ein Element (navbar, ein Tag div, ...) unter Raster legen, aber wenn ich meinen Browser änderte, liegt es auf dem Raster.Wie kann man einen Artikel unter Gitter-System (Größe)

#header { 
 
    height: 40px; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
#header>div { 
 
    padding: 0; 
 
    line-height: 44px; 
 
} 
 
#header div a { 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 12px; 
 
    font-weight: 600; 
 
    height: 44px; 
 
    color: #666; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    float: both; 
 
} 
 
#header div:hover a { 
 
    background-color: lightgrey; 
 
    text-decoration: none; 
 
}

<div id="header" class="container-fluid"> 
 
    <div class="contactinfo col-sm-8"> 
 
     <p> 
 
     <strong>Call :&nbsp;</strong>&nbsp;+84902xxxxxx &nbsp;|&nbsp; <strong>Email:&nbsp;</strong>&nbsp;[email protected]&nbsp;&nbsp; 
 
     </p>   
 
    </div> 
 
    <div class="col-sm-2 signin"> 
 
     <a href="#" id="account">Sign in</a>      
 
    </div> 
 

 
    <div class="col-sm-2 signup" > 
 
     <a href="#" id="cart">Sign up</a>      
 
    </div> 
 
    </div>

Quelle

2016-11-27 Kotarou

Ich glaube, Sie, dies zu tun versuchen. möge es dir hilfreich sein.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <!--<a class="navbar-brand" href="#">WebSiteName</a>--> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#"> 
 
     <strong>Call :&nbsp; </strong> 
 
     &nbsp;+84902xxxxxx &nbsp;|&nbsp; </a> 
 
     </li> 
 
     
 
     <li><a href="#"><strong>Email:&nbsp;</strong>&nbsp;[email protected]&nbsp;&nbsp</a></li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container"> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-11-27 08:44:49

Wie kann man einen Artikel unter Gitter-System (Größe)

Antwort

Verwandte Themen