Bootstrap使文本看起來像按鈕

我正在使用這種語法，但出於某種原因，它使我的文本看起來像是一個按鈕。我想要的是文本只顯示爲具有白色背景的文本 - 黑色文本。如何修改該語法以使文本與按鈕的大綱不一樣？Bootstrap使文本看起來像按鈕

<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group-addon">Date One:</span> 
     <input type="date" name="dateone" /> 
    </div> 
</div> 
<div class="col-md-4 col-xs-4"></div> 
<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group-addon">Date Two:</span> 
     <input type="date" name="datetwo" /> 
     <span class="input-group-btn"> 
     <input type="submit" name="getthat" value="Show Me Info"> 
     </span> 
    </div> 
</div>

在這裏，我也創建引導小提琴顯示視覺： https://jsfiddle.net/DTcHh/35702/

來源

2017-07-31 BellHopByDayAmetuerCoderByNigh

哪裏是你的問題？ –

文本日期一：和日期二：有一個灰色的背景/輪廓，所以它有利於按鈕的外觀 - 而不是文本。 – BellHopByDayAmetuerCoderByNigh

那麼，你在做什麼是使用[引導加載項功能]（https://v4-alpha.getbootstrap.com/components/input-group/）。這就是它的樣子。如果你不想讓它看起來像那樣，用別的東西？ –

<style> 
.input-group-addon_1 { 
    width: 1%; 
    white-space: nowrap; 
    vertical-align: middle; 
} 
.input-group-addon_1 { 
    padding: 6px 12px; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1; 
    color: #555; 
    text-align: center; 

} 
</style> 
<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group-addon_1">Date One:</span> 
     <input type="date" name="dateone" /> 
    </div> 
</div> 
<div class="col-md-4 col-xs-4"></div> 
<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group-addon_1">Date Two:</span> 
     <input type="date" name="datetwo" /> 
     <span class="input-group-btn"> 
     <input type="submit" name="getthat" value="Show Me Info"> 
     </span> 
    </div> 
</div>

來源

2017-07-31 12:25:13 Lekens

這使得文本置於日期之上 - 是否有可能將它們放在同一行？ – BellHopByDayAmetuerCoderByNigh

我只是使代碼uodate ....複製並粘貼，我使用我創建的自定義input-group-addon_1，而不是input-group-addon – Lekens

試試這個

.input-group-addon 
    { 
    background-color: #fff; 
    border: 0px solid #ccc; 
    border-radius: 0px; 
    }

添加這個類在你的CSS文件 OR 也使用類針對特定輸入組

.col-md-2 > .input-group > .input-group-addon 
    { 
    background-color: #fff; 
    border: 0px solid #ccc; 
    border-radius: 0px; 
    }

來源

2017-07-31 12:44:52

只要改變input-group-addon到input-group

<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group">Date One:</span> 
     <input type="date" name="dateone" /> 
    </div> 
</div> 
<div class="col-md-4 col-xs-4"></div> 
<div class="col-md-2 col-xs-2"> 
    <div class="input-group"> 
     <span class="input-group">Date Two:</span> 
     <input type="date" name="datetwo" /> 
     <span class="input-group-btn"> 
     <input type="submit" name="getthat" value="Show Me Info"> 
     </span> 
    </div> 
</div>

工作撥弄https://jsfiddle.net/9txv3rfz/

來源

2017-07-31 12:58:37

Bootstrap使文本看起來像按鈕

回答

相關問題