覆蓋默認引導CSS的一個我的元素

Question

我在CSS新的，我有一個問題（也許這是愚蠢的）一個元素：我有這個CSS代碼的文件瀏覽：

@CHARSET "ISO-8859-1"; 
.file-upload { 
    position: relative; 
    overflow: hidden; 
} 
.file-upload input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    background: red; 
    cursor: inherit; 
    display: block; 
} 
input[readonly] { 
    background-color: white !important; 
    cursor: text !important; 
} 

，這是輸出：

正如你所看到的輸入域有錯誤的寬度，我想在所有的細胞這一領域。我注意到，禁用widht：汽車在引導CSS它的工作原理：

有辦法解決我的問題，這是我的html代碼：

<div class="input-group"> 
    <span class="input-group-btn"> 
     <span class="btn btn-primary file-upload"> Browse&hellip; 
      <input id="idAcquisition" accept=".dat,.zip" type="file" name="file" data="km"/> 
     </span> 
    </span> 
    <input id="datName" type="text" class="form-control" readonly="readonly"> 
</div> 

UPDATE：

寬度：100％！重要的是它覆蓋自舉，但大小是相同的，如果我增加這個值輸入字段沒有響應

Answer 1

你真的有幾個選項。

您可以在CSS之後添加重要標誌，以便您優先考慮。

https://css-tricks.com/when-using-important-is-the-right-choice/

或者你可以讓你的CSS更具體的像下面的CSS。這將覆蓋已經定義的所有引導設置。

https://css-tricks.com/specifics-on-css-specificity/

.input-group .input-group-btn .file-upload input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width:100%; // You need this to override the bootstrap width 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    background: red; 
    cursor: inherit; 
    display: block; 
}