使用引导程序对齐元素

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 大小。全屏预览 sn-p。

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

<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>