Question

你好我开始用bootstrap创建网站，我做了topBar和element 在右边有不同分辨率的小差距，问题是如何摆脱它？我没有选择。

＆＃13;

/* topBar konfigūracija */
#topBar {
  border-bottom-style: solid;
  border-color: black;
  border-width: 5px;
  height: 50px;
  font-family: "Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#topBarKaire, #topBarDesine {
  display: inline-block;
  height: 50px;
}
#topBarDesine {
  float: right;
  clear: right;
}
.informacija {
  display: inline-block;
  font-size: 1.3em;
  padding: 5px;
  height: 50px;
}
.informacija i {
  font-size: 1.6em;
}
#telNumeris {
  background-color: #50D050;
  text-align: center;
  height: 45px;
}
#konsultacija {
  font-weight: bold;
}
@media (max-width: 1000px) {
  #topBar {
    display: none;
  }
}
@media (min-width: 992px) {
  #topBar {
    display: block;
  }
}
@media (min-width: 1200px) {
  #topBar {
    display: block;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head;
    any other head content must come *after* these tags -->
    <title>Naujas turtas - Nekilnojamo turto agentūra</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Karla:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div id="topBar">
        <div id="topBarKaire">
          <div class="informacija"><i class="fa fa-envelope"></i> info@naujasturtas.lt</div>
          <div class="informacija"><i class="fa fa-facebook-official"></i> /NekilnojamasTurtasKursenai</div>
        </div>
        <div id="topBarDesine">
          <div id="konsultacija"class="informacija">Nemokamos konsultacijos</div>
          <div id="telNumeris"class="informacija"><i class="fa fa-mobile"></i> +37069810331</div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

＆＃13;

Answer 1

也许是一个丑陋的解决方案，但为什么不提出margin-left:-1px and margin-top:-1px; 在正确的媒体查询

Answer 2

问题是您使用的是.container，请尝试使用.container-fluid来使导航栏具有响应性和全宽。

.container类在不同分辨率下的大小有限。

不同分辨率的bootstrap小差距

2 个答案: