無法在Webkit中集中Bootstrap輸入組，但在Firefox中正常工作

我有一個頑固的輸入組，它不會居中並完全卡住。特別令人困惑的是，它在Firefox中很好用，但在Webkit瀏覽器中卻不適用。無法在Webkit中集中Bootstrap輸入組，但在Firefox中正常工作

.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>

我仍然得到引導的竅門，但中心的東西已經非常困難。我認爲我的.inline-block類不是正確的方式去做這件事，否則它會在兩個瀏覽器中工作。我究竟做錯了什麼？

來源

2014-11-06 CaptSaltyJack

搜索周圍一點點的告訴我，有*威力*是某種問題與'顯示：WebKit在直列block'。 – CaptSaltyJack 2014-11-06 05:28:44

設置要顯示的元素：塊和居中通過邊距。可作爲混合和課程使用。

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

//類

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

}

來源

2014-11-06 05:28:24 barabaskid

不幸的是，沒有奏效。 http://jsbin.com/xexexa/2 – CaptSaltyJack 2014-11-06 05:31:56

它工作正常。一個輸入組就像一個表，你不能給輸入一個寬度，而不是另一個，我驚訝它在Webkit中工作。 http://jsbin.com/hoxubu/1/edit – Christina 2014-11-08 03:21:59

無法在Webkit中集中Bootstrap輸入組，但在Firefox中正常工作

回答

相關問題