グリッドシステムの下にアイテムを置く方法（サイズ変更）

私はちょうどhtml、css、boostrapを学んでいます。グリッドの下にアイテム（navbar、タグdiv、...）を配置したいのですが、ブラウザのサイズを変更するとグリッドに配置されます。グリッドシステムの下にアイテムを置く方法（サイズ変更）

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

出典

2016-11-27 Kotarou

私はあなたがこれをやろうとしていると思います。それはあなたに役立つかもしれません。

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

出典

2016-11-27 08:44:49

グリッドシステムの下にアイテムを置く方法（サイズ変更）

答えて

関連する問題