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/

Bootstrap使文本看起来像按钮

3 个答案: