Bootstrap Div 或 Span 类似 form-group input-group-addon答案

【问题标题】：Bootstrap Div or Span like form-group input-group-addonBootstrap Div 或 Span 类似 form-group input-group-addon
【发布时间】：2017-11-09 11:54:10
【问题描述】：

是否可以制作类似于 form-group input-group-addon 布局的东西来显示信息？不要在表单中使用它。

HTML：

<div class="form-group ">
    <div class="input-group">
        <span class="input-group-addon">Firstname</span>
        <input value="Vincent" name="InputFirstname" type="text" required>
    </div> 
</div>

CSS：

input {
  background-color: white;
  border: 1px solid lightgrey;
  height:30px;
  padding-left:10px;
}

http://jsfiddle.net/v69ju4Lz/

【问题讨论】：

标签： html css forms twitter-bootstrap layout

【解决方案1】：

这似乎在 Chrome 上运行良好。它不需要新的 CSS 类，但它确实使用了 Bootstrap 已经提供的类。

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Firstname</span>
  </div>
  <span class="form-control">Vincent</span>
</div>

【讨论】：

【解决方案2】：

HTML：

<div class="form-group ">
    <div class="input-group">
        <span class="input-group-addon">Firstname</span>
        <span class="value">Vincent</span>
    </div> 
</div>

CSS：

.value {
  display:block;
  background-color: white;
  border: 1px solid lightgrey;
  height:30px;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
}

【讨论】：