Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/非水平 [英] Bootstrap, align input with label to button without label, vertical form / not horizontal

查看：26
本文介绍了Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/非水平的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将输入与标签对齐，到没有标签的按钮，使用 bootstrap v3 和默认表单(表单的垂直布局，而不是水平布局).

预期效果:http://screencast.com/t/b2uwBopW9rW

我设法通过在标签内创建带有不间断空格的标签来解决这个问题，但我想知道是否有更干净、更好的方法来实现这种效果.

jsfiddle 示例:https://jsfiddle.net/r6o5hysk/1/

<div class="row"><div class="col-xs-10"><div class="form-group"><标签>姓名<input type="text" class="form-control"/>

<div class="col-xs-2"><div class="form-group"><标签>&nbsp;<div class="btn btn-danger">删除</div>

感谢您抽出宝贵时间.

解决方案

Bootstrap 是一个很棒的结构，您可以在其中创建任何类型的 html，只需要了解该结构即可.总是尽量只使用引导类，而不是外部的东西.

使用所需的输出检查此仅引导程序结构

<div class="row"><div class="col-lg-12"><label>名称</label><div class="row"><div class="col-xs-10"><div class="form-group"><input type="text" class="form-control"/>

<div class="col-xs-2"><div class="form-group"><div class="btn btn-danger">删除</div>

示例:https://jsfiddle.net/r6o5hysk/2/

I want to align input with label, to button without label, using bootstrap v3 with default form (vertical, not horizontal layout of form).

Desired effect: http://screencast.com/t/b2uwBopW9rW

I managed to solve this by creating label with non-breaking space inside label, but I wonder if there is more clean, better way to achieve this effect.

Example on jsfiddle: https://jsfiddle.net/r6o5hysk/1/

<div class='container' style='width:200px; margin: 50px;'>
    <div class="row">
      <div class="col-xs-10">
        <div class="form-group">
            <label>
                Name
                <input type="text" class="form-control" />
            </label>
        </div>
      </div>
      <div class="col-xs-2">
        <div class="form-group">
          <label>
              &nbsp;
              <div class="btn btn-danger">Remove</div>
          </label>
        </div>
      </div>
    </div>
</div>

Thank you for your time.

解决方案

Bootstrap is a great structure in which you can create any kind of html just you need to understand the structure. Always try to use only bootstrap classes but not the external things.

Check this bootstrap only structure with the desired output

<div class='container' style='width:200px; margin: 50px;'>
  <div class="row">
    <div class="col-lg-12">
      <label>Name</label>
      <div class="row">
        <div class="col-xs-10">
          <div class="form-group">
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-xs-2">
          <div class="form-group">
            <div class="btn btn-danger">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example : https://jsfiddle.net/r6o5hysk/2/

这篇关于Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/非水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆