Question

我有一个顽固的输入组，不会居中，而且完全陷入困境。特别令人困惑的是，它在Firefox中很有用，但在Webkit浏览器中却不行。

.product {
  margin-bottom: 4rem;
  text-align: center;
}

.product 
  input[type="text"] {
    text-align: center;
    width: 90px;
  }

.product
  .prod-name {
    font-size: 1.8rem;
  }

.product
  .qty-choice {
    margin-top: 1rem;
  }

.product
    .input-group {
      margin-bottom: 1rem;
    }

.product .inline-block {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  
}

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="product">
          <img src="http://placekitten.com/240/240" width="240"
               height="240">
          <div class="prod-name">{{name}}</div>
          <div class="sku">{{sku}}</div>
          <div class="size">{{width}}" W x {{height}}" H</div>
          <div class="price">${{price}}</div>
          <div class="qty-choice inline-block">
            <div class="input-group">
              <span class="input-group-addon">Variation 1</span>
              <input class="form-control qty"
                     type="text" placeholder="Enter Qty">
            </div>
          </div>
          <div>
            <button class="btn btn-primary add-to-cart">Add to
              Cart</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>
</html>

我仍然掌握着Bootstrap，但是以中心为中心非常困难。我认为我的.inline-block类不是正确的方法，否则它将适用于两种浏览器。我做错了什么？

Answer 1

设置要显示的元素：通过边距阻止和居中。可作为mixin和class。

 <div class="center-block">...</div>

// Classes

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

无法在Webkit中集中Bootstrap输入组，但在Firefox中可以正常工作

1 个答案: