缩小屏幕尺寸时风格混乱

Question

请看我的练习网站-http://codepen.io/silentarrowz/pen/rLJABR

我遇到了一些问题：

1. 在缩小屏幕尺寸时，顶部的 eElectronics 和购物车未居中，而是出现在屏幕的一侧。我希望它以小屏幕尺寸为中心。我可以将 eElectronics 徽标居中，但无法将购物车 div 居中，即使我正在使用媒体查询。

2. 对于小屏幕尺寸，导航栏会溢出，并且末尾的链接（例如 OTHERS 和 CONTACT）会流到下一行。我该如何解决这个问题？

3. 轮播标题移出屏幕以减小尺寸。我该如何解决这个问题？

请提出您的建议和意见。

.navcolor{
  background-color:#1abc9c;
}
.logo a{
  padding-bottom:10px;
  color:#999;
}
.logo a span{
  color:#1abc9c;
}
.cart {
  border:1px solid rgb(221,221,221);
  font-family:"Titillium Web";
  font-size:18px;
  width:140px;
  height:50px;
  padding-top:10px;
  padding-left:10px;
}
.cart a{
  color:#666;
}
.cart a span{
  color:#1abc9c;
  font-weight:bold;
}
.cart:hover {
  background-color : #1abc9c;
}
.cart:hover span, .cart:hover a{
  color:white;
}
.no-underline :hover{
  text-decoration:none;
}
.navbar-default .navbar-menu{
   height:50px;
}
.navbar-default .navbar-menu li > a{
  color:white;
  font-weight:bold;
  font-size:14px;
}
.navbar-default .navbar-menu > .active > a {
  background-color:#333;
  color:white;
}
.navbar-default .navbar-menu > .active > a:hover {
  background-color:#333;
  color:white;
}
.navbar-default .navbar-menu li>a:hover{
  background-color:#333;
  color:white;
}
#carousel1 img{
  width:100%;
  height:70%;
}
.logo{
  font-family:"Titillium Web";
  font-size:40px;
}
.cart{
  font-size:18px;   
}
.carouse-inner{
  position:relative;
}
.carousel-caption{
  background-color:rgba(0,0,0,0.5);
  color:white;
  display:block;
  width:600px;
  padding-left:20px;
  text-align:left;
  position:absolute;
  left:600px;
  bottom:150px;
}
.latest img{
  border:1px solid grey;
}
.details p{
  height:150px;
  display:block;
  border:1px solid #17a78b;
  margin-top:30px;
  margin-bottom:30px;
  padding-top:10px;
  padding-bottom:10px;
  font-size: 30px;
  font-weight:200;
  color:#fff;
  text-align:center;
}
.details p:hover{
  background-color:black;
}
.details p>i{
  font-size:50px;
  font-weight:500;
}
.details{
  background-color:rgb(26,188,156);
}
.latest{
  text-align:center;
}
@media (max-width: 300px) {
  .logo{
    text-align:center;
  }
  .cart{
    width:100%;
    text-align: center;
  }   
}

@media (min-width: 501px) {
  .logo {
    float: left;
  }
  .cart {
    float:right;
  }
}

Answer 1

问题 2： 您的 OTHER 和 CONTACT 菜单按钮位于下一行，因为您的导航栏位于宽度为 750px 的 div.container 中，分辨率低于 768px，并且没有放置它们的位置同一行。

@media (min-width: 768px){
    .container {
        width: 750px;
    }
}

你可以给它另一个宽度不同的类，因为你有 .container 类分配给更多的 div，并使其更宽。

您还可以为 .navbar-colapse.in 类指定 330 像素的最小高度，以在分辨率低于 768 像素时使折叠菜单更高：

@media (min-width: 768px){
    .navbar-collapse.in {
        overflow-y: auto;
        min-height: 330px;
    }
}

问题 3： 正如史蒂夫所说，更改您的 .carousel-caption 样式，以百分比 (100%) 提供宽度，并将边距设置为自动。

.carousel-caption {
    width: 100%;
    left: auto;
    right: auto;
}

Answer 2

如果您尝试使用 text-align 使 div 居中，那不是可行的方法。您需要将左右边距设置为自动：

    @media (max-width: 300px) {
      .logo{
        text-align: center;
        margin: 0 auto;
     }
     .cart{
        width:100%;
        margin: 0 auto;
     }
}

问题是您的 eElectronics 并没有占用 div 的所有空间，居中的 div 两侧有自动边距，而文本在 div 内居中对齐。

对于折叠模式下的菜单，我得到一个滚动条，一切都很好，只是有点小。溢出覆盖：可见；如果它在其他项目下重叠，则设置 z-index。

.navbar-collapse.in {
    overflow-y: visible;
}

轮播字幕在 Firefox 上对我来说很好。您只需要以 % 为单位设置宽度并将每边的边距设置为自动。该 div 需要具有适应性。现在它保持在 .carousel-caption 中设置的 600px 大小。