引导使文本看起来像按钮

Question

我正在使用这种语法，但由于某种原因，它使我的文本看起来像一个按钮。 我想要的是文本仅显示为文本 - 带有白色背景的黑色文本。 如何更改此语法，以使文本不具有与按钮相同的轮廓？

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

Answer 1

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

Answer 2

试试这个

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

在 CSS 文件中添加此类 或 也对特定的输入组使用类

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

Answer 3

只需将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/