代码之家 › 专栏 › 技术社区 › kaka1234

使用bootstrap 3进行表单控件对齐

twitter-bootstrap-3 css html

kaka1234 · 技术社区 · 7 年前

这可能是我所缺少的简单的东西,但我无法接受。我正在应用程序中使用引导程序3。在我的表单中,我有一些控件,如下拉列表、文本框、标签等。请参见下面的示例:

<div class="modal-body">
<form role="form" name="form" class="form-body">
    <div class="form-group"> 
        //form label here
        <div class="m-grid-col-sm-5">               
           //form element here
        </div>
    </div>
</form>
<div>

以上只是一个例子。问题是,当我运行我的应用程序时,我可以看到标签总是在控制之上。我想要的是左边的标签和右边的表单控件(下拉框、文本框等)。

您可以看到我在以下位置创建了一个示例JSfiddle: https://jsfiddle.net/aman1981/xprh2tno/8/

请忽略模态类,因为问题不在于我没有模态类,而是我的应用程序中的其他表单。

我试过调整和使用不同的班级,但似乎没有很好的调整。

2 回复 | 直到 7 年前

K K 7 年前

您需要参考以下文档中的水平表格部分: http://bootstrapdocs.com/v3.0.3/docs/css/#forms

HTML:

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>

演示: https://jsfiddle.net/xprh2tno/12/

Md. Abu Sayed 7 年前

您可以在这里尝试此代码

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="name" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

<div class="form-group">
    <label for="sex" class="col-xs-2 control-label">Sex</label>
    <div class="col-xs-10">
       <select name="sex" class="auto-width setup-inline form-control input-medium" required>
          <option value="">---Please select---</option>
          <option value="m">Male</option>
          <option value="f">Female</option>
       </select>
    </div>
</div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10 text-right">
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
  </div>
</form>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前