如何将引导输入组移动到文本字段的顶部？

Question

我试图将这个附加组件移到文本框的顶部，但我认为在不破坏设计的情况下，这样做并不容易。

​

​

以下是我的当前代码：

<div class="input-group">
  <span class="input-group-addon redbar">Some long<br>addon text here:</span>
        <input type="text"
               name="someName"
               maxlength="11"
               style="height:134%;"
               class="form-control"
               title="some title"
               placeholder="the content"/>
</div>

(增加断线和调整高度是我的创可贴解决方案。)我知道我可以使用标签，但是这样做会使它与站点的其他部分不一致(除非它的样式是相同的)。

我试着查看不同的SO帖子，但没有看到任何相关的东西。这有可能用靴带吗？

Answer 1

我不太确定你想如何展示它。如果你能给出一个你想要的图像，那么我们肯定能找到精确的解决方案。然而，我已经在你的轨道上安装了这把小提琴，我想。

​

.redbar{
 text-align: center;
border-image: none;
border-radius: 3px !important;
border-left: 3px solid red !important;
border-right: 3px solid red !important;
display: block !important;
width: 150px !important;
margin: 0px auto;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <span class="input-group-addon redbar">Some long<br>addon text here:</span>
        <input type="text"
               name="someName"
               maxlength="11"
               style="height:134%;"
               class="form-control"
               title="some title"
               placeholder="the content"/>
</div>

​

Answer 2

<div class="input-group">
<div class="col-xs-12 redbar">Some long<br>addon text here:</div>
<input type="text" 
     name="someName" 
     maxlength="11" 
     style="height:134%;" 
     class="form-control" 
     title="some title"
     placeholder="the content"/>
</div>

CSS

.redbar{
  text-align:center;
}

https://jsfiddle.net/f9feamb2/

我想这是你需要的结果。删除.addon类