Bootstrap Div或Span，如form-group input-group-addon

Question

是否可以制作类似于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/

Answer 1

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

Answer 2

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