Bootstrap 如何使两个元素在同一行中- html css

bjp0bcyl 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(270)

我有这样的代码：

<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
        <i class="fa fa-info-circle" title="test"></i>
    </div>                                 
</div>

这是用户界面

我只希望<i>图标在输入字段旁边，而不是在底部。
我怎么能做到呢？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73517312/how-to-make-two-elements-to-be-in-the-same-line-html-css

2条答案

按热度按时间

n9vozmp41#

使用类input-group将input字段和icon Package 在div中。

<div class="input-group">
   <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
   <i class="fa fa-info-circle" title="test"></i>
</div>

赞(0）回复(0）举报 2022-12-08

6uxekuva2#

这就是解决方案

<div class="form-group">
  <label>Name:</label>
  <div class="input-group" style="display: flex">
      <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
     <i class="fa fa-info-circle" title="test"></i>
 </div>  
</div>

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 如何使两个元素在同一行中- html css

2条答案

相关问题

热门标签

最新问答