使用引导程序对齐元素

Question

我希望下面的标记显示与下列输入字段的文本标签对齐的“格式示例”字符串，如下面的屏幕截图所示。它目前表现得像是正确的。由于我使用AngularJS和Bootstrap我不想使用静态宽度之类的东西，所以我应该如何修改它以使其更加动态？

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">

  <div style="float:left">
    <legend>Copy</legend>
    <div style="float:right">
      <u>Format Example</u>
    </div>
    <br/>
    <br/>
    <div>
      <input type="text" /> Format Unknown
    </div>
    <br/>
    <div>
      <input type="text" /> X.X.X
    </div>
    <br/>
    <div>
      <input type="text" /> YYYYMMDD-HHMM
    </div>
    <br/>
    <div>
      <input type="text" /> X.X-SNAPSHOT
    </div>
    <br/>
    <div>
      <input type="text" /> YYYY-MM-DD HH:MM:SS
    </div>
  </div>
</fieldset>

Answer 1

您只需要使用列和行将其网格化。这是一个基本示例，您需要根据需要添加md，sm和xs大小调整。全屏预览片段。

另外，避免使用中断来划分行。请改为使用css。

＆＃13;

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset style="display:inline-block">

  <div style="float:left">
    <legend>Copy</legend>
    <div class="row">
      <div class="col-lg-6 col-lg-offset-6"><u>Format Example</u></div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">Format Unknown</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">X.X.X</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">YYYYMMDD-HHMM</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">X.X-SNAPSHOT</div>
    </div>
    <div class="row">
      <div class="col-lg-6"><input type="text" /></div>
      <div class="col-lg-6">YYYY-MM-DD HH:MM:SS</div>
    </div>
  </div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;