想要使用HTML以下列格式显示文本框

时间:2018-01-09 03:09:45

标签: html5 twitter-bootstrap

我想以下列格式显示文本框,如附图所示。我不知道如何以给定的格式显示。请帮助我。谢谢。 enter image description here 我的代码是:

<div class="container">
    <form>
            <div class="row">
            <div class="col-sm-3">
                <div class="form-group">

                    <label>Sire</label>
                    <input id="txtSir" type="text" class="form-control" >

                    <label for="Dam">Dam</label>
                    <input id="txtDam" type="text" class="form-control">

                </div>
            </div>
            <div class="col-sm-3">
                <label>2nd Generation</label>
                <div class="form-group">
                    <input id="txtsSir" type="text" class="form-control">

                </div>
                <div class="form-group">
                    <input id="txtsDam" type="text" class="form-control">
                  </div>
                <div class="form-group">
                    <input id="txtdSir" type="text" class="form-control">

                </div>
                <div class="form-group">
                    <input id="txtdDam" type="text" class="form-control">

                </div>

            </div>

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

1 个答案:

答案 0 :(得分:0)

可能对此有所帮助

<强> HTML

<div data-role="page">
 <div class="container">
    <form>
      <div class="row">
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-6">
              <label>2nd Generation</label>
              <div class="form-group">
                <input id="txtdSir" type="text" class="form-control">
              </div>
            </div>
            <div class="col-sm-6 vcenter">
                <div class="form-group">
                  <label>Sire</label>
                  <input id="txtSir" type="text" class="form-control" >
                </div>
            </div>
            <div class="col-sm-6 col-sm-offset-6">
              <div class="form-group">
                <input id="txtdSir" type="text" class="form-control">
              </div>
            </div>
            <div class="col-sm-12">
              &nbsp;
            </div>
            <div class="col-sm-6 col-sm-offset-6">
              <div class="form-group">
                <input id="txtdSir" type="text" class="form-control">
              </div>
            </div>
            <div class="col-sm-6 vcenter">
              <div class="form-group">
                  <label>Dam</label>
                  <input id="txtDam" type="text" class="form-control" >
                </div>
            </div>
            <div class="col-sm-6 col-sm-offset-6">
              <div class="form-group">
                <input id="txtdSir" type="text" class="form-control">
              </div>
            </div>
          </div>
       </div>

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