【问题标题】:How to align elements in a bootstrap-form如何在引导表单中对齐元素
【发布时间】:2015-06-10 03:47:12
【问题描述】:

请。看看我的代码@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>

【问题讨论】:

    标签: css twitter-bootstrap font-awesome


    【解决方案1】:

    您正在寻找这样的东西吗? 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>
    

    【讨论】:

    • 抱歉,我现在才看到您取出了我需要的“col-md-x”类(以确保样式保持一致)。实际上我有几行这些输入。这也可行吗?
    • 我可能需要您提供更多 HTML。您能否从您的 html 中添加一或多行?
    • 谢谢 - 不用着急。我冲出办公室,明天继续……
    • 如果你有兴趣,故事还在继续! ;-) stackoverflow.com/questions/30749619/…
    猜你喜欢
    • 1970-01-01
    • 2023-03-04
    • 2018-10-09
    • 2021-08-29
    • 2021-06-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-26
    相关资源
    最近更新 更多