Question

我的迷你购物车布局有一个小问题（我希望它很小），我正在使用引导程序3，

工作（IE和FireFox）

在ie和firefox示例中工作：

不起作用（Chrome）

不适用于Chrome示例：

在IE和firefox中，购物车下拉列表显示的很好，但是在chrome中，文本全部被压缩了，在.css文件中使用 min-width：350px; 似乎不起作用

CSS代码：

.product_view .modal-dialog {
    max-width: 800px;
    width: 100%;
}
.pre-cost {
    text-decoration: line-through;
    color: #a5a5a5;
}
.space-ten {
    padding: 10px 0;
}
ul.dropdown-cart {
    min-width: 350px;
}
ul.dropdown-cart li .item {
    display: block;
    padding: 3px 10px;
    margin: 3px 0;
}
ul.dropdown-cart li .item:hover {
    background-color: #f3f3f3;
}
ul.dropdown-cart li .item:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
ul.dropdown-cart li .item-left {
    float: left;
}
ul.dropdown-cart li .item-left img,
ul.dropdown-cart li .item-left span.item-info {
    float: left;
}
ul.dropdown-cart li .item-left span.item-info {
    margin-left: 10px;
}
ul.dropdown-cart li .item-left span.item-info span {
    display: block;
}
ul.dropdown-cart li .item-right {
    float: right;
}
ul.dropdown-cart li .item-right button {
    margin-top: 14px;
}

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="mainNavBar">

      <?php if (empty($_SESSION['member']) || !isset($_SESSION['member']) || !isset($member)) { ?>

          <ul class="nav navbar-nav">
                <li><a href="<?php echo getUrl(); ?>"><span class="glyphicon glyphicon-home"></span> HOME</a></li>
                <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="<?php echo getUrl(); ?>shop.php"><span class="glyphicon glyphicon-shopping-cart"></span> SHOP <span class="caret"></span></a>
                     <ul class="dropdown-menu">

                       <li><?php $c = DB::getInstance()->select("SELECT * FROM `categories`"); foreach($c as $cat) { echo "<a href=\"shop.php?catId={$cat['cat_id']}\">{$cat['cat_name']}</a>"; } ?></li>

                     </ul>
                </li>               
                <li><a href="<?php echo getUrl(); ?>signup.php"><span class="glyphicon glyphicon-user"></span> SIGNUP</a></li>
                <li><a href="<?php echo getUrl(); ?>login.php"><span class="glyphicon glyphicon-log-in"></span> LOGIN</a></li>
          </ul>

          <?php } else { ?>

           <ul class="nav navbar-nav">
                <li><a href="<?php echo getUrl(); ?>"><span class="glyphicon glyphicon-home"></span> HOME</a></li>
                <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="<?php echo getUrl(); ?>shop.php"><span class="glyphicon glyphicon-shopping-cart"></span> SHOP <span class="caret"></span></a>
                     <ul class="dropdown-menu">

                       <li><?php $c = DB::getInstance()->select("SELECT * FROM `categories`"); $url = getUrl(); foreach($c as $cat) { echo "<a href=\"{$url}shop.php?catId={$cat['cat_id']}\">{$cat['cat_name']}</a>"; } ?></li>

                     </ul>
                </li>
                <li><a href="<?php echo getUrl(); ?>my-account.php"><span class="glyphicon glyphicon-list-alt"></span> MY ACCOUNT</a></li>
                <li><a href="<?php echo getUrl(); ?>my-orders.php"><span class="glyphicon glyphicon-align-justify"></span> MY ORDERS</a></li>
           </ul>      

      <?php } ?>

      <!-- Search -->
      <div class="col-sm-3 col-md-3">
            <form class="navbar-form" role="search" action="<?php echo getUrl(); ?>" method="get">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search store ..." name="q">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
            </form>
      </div>

      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span> CART <b><span class="label label-badge label-danger"><?php echo (addUpProductInCart($member) > 0) ? addUpProductInCart($member) : "0"; ?></span></b><span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-cart" role="menu">

              <?php $cart = DB::getInstance()->select("SELECT * FROM `cart` WHERE `cart_customer_id`='{$member}' AND `cart_payment_processed`='N'"); ?>

              <?php foreach ($cart as $cartProduct) { ?>

              <li>  
                  <span class="item">
                    <span class="item-left">
                        <img src="<?php echo $cartProduct['cart_thumbnail']; ?>" style="width:50px; height:50px;" alt="" />
                        <span class="item-info">
                            <span class="text-danger"><?php echo strtolower($truncated = (strlen($cartProduct['cart_product_name']) > 20) ? substr($cartProduct['cart_product_name'], 0, 35) . '...' : $cartProduct['cart_product_name']); ?></span>
                            <span class="text-success">&dollar;<?php echo $cartProduct['cart_product_price']; ?></span>
                        </span>
                    </span>
                </span>
              </li>

              <?php } ?>

              <li class="divider"></li>
              <li><a class="text-center" href="<?php echo getUrl(); ?>cart.php"><span class="glyphicon glyphicon-eye-open"></span> View Cart</a></li>

          </ul>
        </li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

我不确定我可以添加哪些内容进行修复，我从未发布过任何购物车代码，如果有人认为这会有所帮助，可以提供帮助，便可以发布。

Answer 1

您可能定位了错误的CSS，因为引导程序针对不同的媒体查询将具有不同的CSS

快速修复并实时查看代码，请尝试

<ul class="dropdown-menu dropdown-cart" role="menu" style="width:350px">

其中

<ul class="dropdown-menu dropdown-cart" role="menu">

Answer 2

我假设这是因为你的 html 中没有这个 <meta name="viewport" content="width=device-width,initial-scale=1">

最小宽度在Chrome浏览器中不起作用

2 个答案: