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帖子，但没有看到任何相关内容。 Bootstrap有可能吗？

Answer 1

我不太确定你希望它如何显示。如果你能展示出你想要的图像，那么我们肯定可以提出精确的解决方案。但是，我猜你可能会在我的轨道上加上this fiddle。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我认为这是你需要的结果。删除了类.input-group-addon

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

2 个答案: