如何在bootsrap的右侧对另一个2文本框进行对齐

时间:2016-08-07 13:30:40

标签: html css twitter-bootstrap



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

<div class = "container">
  <div class="row">
    <div class="col s12 m6">
      <br />
      <br />
      <div class = "container">
        <form class="form-horizontal">
          <div class="form-group form-group-lg">
            <div class="col-xs-3">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Name of Instructor"/>
            </div>
          </div>
          <div class="form-group form-group-lg">
            <div class="col-xs-3">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Subject"/>

            </div>
          </div>
          <div class="clearfix">
            <div class="pull-right">
              <div class="form-group form-group-lg">
                <input type="text" class="form-control" />
              </div>
              <div class="form-group form-group-lg">
                <input type="text" class="form-control input" />
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

继承我的4个文本框的代码是的我复制了你的代码抱歉,因为我只是一个初学者。

这是图像:

enter image description here

我想在右侧添加两个

更新图片

enter image description here

1 个答案:

答案 0 :(得分:0)

添加.pull-right课程。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="clearfix">
  <div class="pull-right">
    <div class="form-group">
      <input type="text" class="form-control" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" />
    </div>
  </div>
</div>

<强>更新

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

<div class = "container">
  <div class="row">
    <div class="col s12 m6">
      <br />
      <br />
      <div class = "container">
        <form class="form-horizontal">
          <div class="form-group form-group-lg">
            <div class="col-xs-3 pull-right">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Name of Instructor" />
            </div>
          </div>
          <div class="form-group form-group-lg">
            <div class="col-xs-3 pull-right">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Subject"/>

            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<强> UPDATE2

使用col-*-offset向右“推”其他输入。

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

<div class = "container">
  <div class="row">
    <div class="col s12 m6">
      <br />
      <br />
      <div class = "container">
        <form class="form-horizontal">
          <div class="form-group form-group-lg">
            <div class="col-xs-3">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Name of Instructor"/>
            </div>
            <div class="col-xs-3 col-xs-offset-6">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Name of Instructor"/>
            </div>
          </div>
          <div class="form-group form-group-lg">
            <div class="col-xs-3">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Subject"/>

            </div>
            <div class="col-xs-3 col-xs-offset-6">
              <input class="form-control input-sm" type="text" id="inputName"
                     placeholder="Subject"/>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>