縮小屏幕尺寸時樣式混亂

Question

請看看我的練習網站-http://codepen.io/silentarrowz/pen/rLJABR

我有一些問題：

1. 屏幕尺寸減小時，頂部的電子設備和購物車不會居中，而是顯示在屏幕的一側。 我希望它以小屏幕尺寸為中心。 即使使用媒體查詢，我也可以將eLogotronics徽標居中，但不能將購物車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

如果您嘗試將divs與text-align居中對齊，那是不可行的方法。 您需要在左右兩側設置邊距以自動：

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

關鍵是您的電子設備不會占用div的所有空間，在div的中心居中，邊距為margin，在div內居中對齊。

對於處於折疊模式的菜單，我得到了一個滾動條，除它有點小之外，其他都不錯。 用溢出覆蓋：可見； 並在其他項目下重疊時設置z-index。

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

輪播字幕對我來說在Firefox上不錯。 您只需要以％設置寬度，並將每邊的邊距設置為auto。 該div需要具有適應性。 現在，它保持在.carousel-caption中設置的600px大小。

Answer 2

問題2：您的“其他”和“聯系人”菜單按鈕轉到下一行，因為導航欄位於div。容器中，寬度為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：正如Steve所說，更改您的.carousel-caption樣式，將寬度（百分比）（100％）和邊距設置為auto。

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