css - 如何对齐 Bootstrap 形式的元素

标签 css twitter-bootstrap font-awesome

请。看看我的代码 @ http://www.bootply.com/VcVDblSFK7 - 我希望在同一行中包含键符号和输入控件的跨度(后跟错误消息的跨度)。但我已经做了太多的编辑,并且看不到解决这个问题的方法。

<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">
      </div>
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="newpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">
      </div>
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="col-md-3">
      <div class="input-group">
        <span class="fa fa-key fa-fw input-group-addon"></span>
        <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">
      </div>
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>

最佳答案

您正在寻找这样的东西吗? http://www.bootply.com/RBjyGORKLe

    <div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="oldpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="newpswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="form-inline col-md-3">
        <div class="form-group">        
            <div class="input-group">
                <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
                    <input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">   
            </div>
        </div>      
    </div>
    <span id="reppswd_errmsg" class="bg-danger col-md-3">xxxx</span>
  </div>
</div>

关于css - 如何对齐 Bootstrap 形式的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30738304/

相关文章:

css - 第 nth-child 没有选择我图库中的特定图像

css - 响应式适用于屏幕测试仪,但不适用于手机

javascript - Bootstrap 轮播事件 'slide.bs.carousel' 仅被解雇

html - Font Awesome 图标未正确定位在页脚中

css - 如何在 Font Awesome 符号上添加徽章?

html - 如何从 45x45 像素的小图像生成全长淡入菜单?

html - 如何让一个 div 显示在另一个 div 的下方,并在其周围显示文字?

html - 当鼠标悬停在 li 子 ul 上时更改父 li > span 的颜色

jquery - 我可以将徽章放在 Bootstrap 输入中吗?

css - 如何在 css 或 sass 中为类名起别名