Question

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

我遇到的问题很少：

在缩小的屏幕尺寸下，顶部的电子设备和推车不会居中，而是出现在屏幕的一侧。我希望它以小屏幕尺寸为中心。虽然我使用的是媒体查询，但我能够将eElectronics徽标集中在一起，但却无法将购物车div放在中心位置。
导航栏溢出小屏幕尺寸和最后的链接，如OTHERS＆amp;联系流程到下一行。我该如何解决这个问题？
旋转木马标题移出屏幕以减小尺寸。我该如何解决这个问题？

请提供您的建议和意见。

.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

如果您尝试使用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需要适应性。现在，它保持在600像素的大小.carousel-caption。

Answer 2

问题2：您的其他＆amp; CONTACT菜单按钮位于下一行，因为您的导航栏位于div.container中，宽度为750px，分辨率低于768px，而且该行没有位置。

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

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

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

@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;
}

屏幕尺寸缩小时样式变得混乱

2 个答案: