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使文本看起来像按钮

回答

相关问题