html - 想用插件设计 Bootstrap 水平形式

Question

我想用 Bootstrap 设计横向表单

1. 想在输入字段的左侧添加插件。
2. 响应迅速，但标签保持稳定。
3. 一些字段在 2 列上。

<div class="container">
  <form class="form-horizontal">
  <fieldset class="col-xs-6">
    <legend>Portfolio A</legend>
    <div class="col-xs-12">
     <div class="form-group">
      <label for="name" class="col-xs-4 control-label">Label A1</label>
            <div class="col-xs-8">
          <input type="text" class="form-control" placeholder="control1" />
            </div>
        </div>
        <div class="form-group">
        <label for="name" class="col-xs-4 control-label">label A2</label>
          <div class="col-xs-8">
          <input type="text" class="form-control" placeholder="control2" />
            </div>
        </div>
    </div>
     </fieldset>
   <fieldset class="col-xs-6">
    <legend>Portfolio B</legend>
    <div class="col-xs-12">
        <div class="form-group">
      <label for="name" class="col-xs-4 control-label">Label B1</label>
            <div class="col-xs-8">
        <input type="text" class="form-control" placeholder="control1" />
            </div>
        </div>
        <div class="form-group">
           <label for="name" class="col-xs-4 control-label">label B2</label>
         <div class="col-xs-8">
      <input type="text" class="form-control"    placeholder="control2" />
            </div>
        </div>
    </div>
     </fieldset>
    </form>
    </div>

Answer 1

查看文档:您可以使用文本、字体图标等。Bootstrap 3 Input groups

#soForm .form-control {
  height: 50px;
  font-size: 16px;
  -webkit-border-radius: 0;
  border-radius: 0;
}
#soForm .input-group-addon {
  height: 50px;
  font-size: 13px;
  -webkit-border-radius: 0;
  border-radius: 0;
}
@media (min-width: 768px) {
  #soForm .soForm {
    margin: 10px auto;
  }
  #soForm .control-label {
    margin-top: 25px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form id="soForm" name="soForm">
    <div class="form-group">
      <label for="text1" class="col-sm-2 control-label">Label 1</label>
      <div class="col-sm-10">
        <input type="email" class="form-control soForm" id="text1" placeholder="Text" />
      </div>
    </div>
    <div class="form-group">
      <label for="text2" class="col-sm-2 control-label">Label 2</label>
      <div class="col-sm-10">
        <div class="input-group soForm"> <span class="input-group-addon"><span class="glyphicon glyphicon-tasks"></span></span>
          <input type="text" class="form-control" id="text2" placeholder="Text" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="text3" class="col-sm-2 control-label">Label 3</label>
      <div class="col-sm-3">
        <div class="input-group soForm"> <span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
          <input type="text" class="form-control" id="text3" placeholder="Text" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="text4" class="col-sm-2 control-label">Label 4</label>
      <div class="col-sm-5">
        <div class="input-group soForm"> <span class="input-group-addon"><span class="glyphicon glyphicon-tasks"></span></span>
          <input type="text" class="form-control" id="text4" placeholder="Text" />
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="text5" class="col-sm-2 control-label">Label 5</label>
      <div class="col-sm-10">
        <input type="email" class="form-control soForm" id="text5" placeholder="Text" />
      </div>
    </div>
  </form>
</div>