宽度不一致，求教
来源：2-1 认识栅格化布局
慕先生7419658
2018-05-13 11:32:50
做了一个练习，700尺寸以下 发现两个盒子，宽度不一致。。。
代码如下：
CSS
a{
text-decoration: none;
color:white;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.hidden{
display:none;
}
.dis{
display:block;
}
#header{
background-color:pink ;
}
#search_item1{
/*border:1px solid red;*/
height:20px;
}
#search>a{
content:"";
display:inline-block;
/*border:1px solid red;*/
/*width:20px;*/
height:20px;
/*top:50px;*/
background:url("imgs/icon-1-sprite_w22.png") no-repeat center;
background-position:0px 0px;
}
.icon_item1:after,.icon_item2:after,.icon_item3:after{
content:"";
display:inline-block;
position:absolute;
margin-left:25px;
width:20px;
height:20px;
background:url("imgs/icon-1-sprite_w22.png") no-repeat center;
}
.icon_item1:after{
background-position:0px -24px;
margin-top:0px;
}
.icon_item2:after{
background-position: 0px -48px;
margin-top:6px;
}
.icon_item3:after{
background-position: 0px -72px;
margin-top:7px;
}
#banner{
border:1px solid red;
height:60px;
width:100%;
}
@media screen and (max-width:768px){
.container{
width:100%;
min-width: 300px;
}
#log{
background:url("imgs/logo.png") no-repeat center;
height:50px;
}
#search{
display:inline-block;
top:15px;
padding-right: 0px;
padding-left: 0px;
}
#profile{
top:15px;
/*border:1px solid green;*/
}
.dropdown-menu{
border:0px;
width:0px;
min-width:0px;
}
#profile_ul{
width:10rem;
}
#profile_ul>li>span{
display:inline-block;
margin-left:20px;
width:16px;
}
/* #search input{
width:60rem;
}*/
}
@media screen and (min-width:769px) and (max-width:991px){
.container{
width:100%;
height:30px;
}
.nav>li>a{
font-size:1px;
}
#log{
top:1px;
background:url("imgs/logo.png") no-repeat center;
height:30px;
/*height:75px;*/
}
#search{
/*width:300px;*/
top:10px;
}
#search input{
width:100px;
height:20px;
}
#icon{
top:10px;
}
/*li{
width:170px;
}*/
}
@media screen and (min-width:992px) and (max-width:1199px){
.container{
width:100%;
height:60px;
/*height:75px;*/
}
#log{
top:3px;
background:url("imgs/logo.png") no-repeat center;
height:60px;
/*height:75px;*/
}
li{
width:70px;
top:10px;
}
#search{
top:20px;
}
#icon{
top:25px;
}
}
@media screen and (min-width:1200px){
.container{
width:100%;
height:75px;
}
#log{
/*border:1px solid green;*/
top:2px;
height:75px;
background:url("imgs/logo.png") no-repeat center;
}
#profile{
top:10px;
}
.nav>li>a{
font-size:20px;
}
#search{
top:25px;
/* left:100px;*/
}
}
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VoteBoostrap01</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="vote1.css" />
<script src="js/jquery-3.1.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!-- class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" -->
<div class="container" >
<div id="header" class="row">
<div id="log" class="col-xs-5 col-sm-2 col-md-2 col-lg-2"></div>
<!-- 图片用北京好还是IMG好 -->
<div id="search" class="col-xs-push-1 col-xs-5 col-sm-3 col-md-4 col-lg-4 ">
<input id="search_input" type="text" class="hidden col-xs-push-1 col-xs-9" id="search_item1">
<a id="search_icon" class="pull-right col-xs-1"></a>
</div>
<div id="profile" class="pull-right col-xs-1 col-sm-4 col-md-3 col-lg-3 ">
<a href="#" class="dropdown-toggle glyphicon glyphicon-list" data-toggle="dropdown"></a>
<ul id="profile_ul" class="dropdown-menu">
<li ><a href="" class="item1">pro-a</a></li>
<li class="divider"></li>
<li class="profile_li "><a href="" class="item2">pro-b</a></li>
<li class="divider"></li>
<li class="profile_li "><a href="" class="item3">pro-c</a></li>
<li class="divider"></li>
<li class="icon_item1"><span id="sms">SMS</span></li>
<li class="divider"></li>
<li class="icon_item2"><span id="tel">Tel</span></li>
<li class="divider"></li>
<li class="icon_item3"><span id="fax">Fax</span></li>
</ul>
</div>
</div>
<div id="banner" class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>
</div>
</div>
</body>
<script>
let xsm=window.matchMedia("(max-width:768px)");
if(xsm.matches){
let pro=document.getElementById("profile");
let search=document.getElementById("search");
let searchitem1=document.getElementById("search_item1");
let icon=document.getElementById("icon");
let icon_ul=document.getElementById("icon_ul");
let pro_li=document.getElementsByClassName("profile_li");
let pro_ul=document.getElementById("profile_ul");
let searchicon=document.getElementById("search_icon");
let searchinput=document.getElementById("search_input");
let bodyname=document.body;
// icon.parentNode.removeChild(icon);
// searchitem1.parentNode.removeChild(searchitem1);
bodyname.onclick=function(){
// alert("1");
if(searchinput.classList.contains("dis")){
searchinput.classList.remove("dis");
searchinput.classList.add("hidden");
}
}
searchicon.onclick=function(e){
// alert("2");
e.stopPropagation();
if(searchinput.classList.contains("hidden")){
searchinput.classList.remove("hidden");
searchinput.classList.add("dis");
}
}
// for(let j=0;j<pro_li.length;j++){
// pro_li[j].style.display='none';
// }
}
</script>
</html>
<!-- class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" --> <!--
` 超小屏幕 手机 (<768px) .col-xs-数字
小屏幕 平板 (≥768px) .col-sm-数字
中等屏幕 桌面显示器 (≥992px) .col-md-数字
大屏幕 大桌面显示器 (≥1200px) .col-lg-数字
min-width max-width
min-width 400px 最小是400px 400以上都采用制定的样式
max-width 600px 最大值 600px 600以采用 样式
-->
1回答
-
妮可妮可妮_
2018-05-14
因为宽度100%是按照父元素的宽度来算的,row添加了左右的margin15px,
因此会比不设置100%的宽度小总共30px
祝学习愉快!
0
相似问题