Question

有点像初学者的问题，我试图让我的表单看起来像下面的图像，左边的文字是垂直对齐的，输入字段的宽度相同。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <label class="d-inline">Full Name: </label>
            <input type="text" placeholder="First Name" formControlName="firstName">
        </div>
        <div class="col-md-6">
            <h6>Some text</h6>
        </div>
    </div>
    <br>

    <div class="row">
        <div class="col-md-6">
            <label class="d-inline">Email: </label>
            <input type="email" placeholder="Email" formControlName="email">
        </div>
        <div class="col-md-6">
            <h6>Some text</h6>
        </div>
    </div>
</div>

这给了我以下结果。我还希望输入延伸到剩余的父容器，以便它在＆＃34; some text＆＃34;之前停止。

my attempt

我试图将输入字段的宽度css属性设置为100％，希望它会这样做。然而，这只是拉伸它一直迫使它进入下一行。

我正在使用Angular2的bootstrap 4。

Answer 1

你说你正在使用Bootstrap。为什么不使用Bootstrap Form呢？您可以找到操作方法HERE

在“完整页面”中打开以下代码段，了解其工作原理

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-lg-1 control-label">Email</label>
    <div class="col-lg-2">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-lg-1 control-label">Password</label>
    <div class="col-lg-2">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-1 col-lg-2">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-1 col-lg-3">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

＆＃13;

Answer 2

只需给你的p标签一个最小宽度。我给输入一个最大宽度，所以当你的屏幕尺寸更小时它会更好。希望这能回答你的问题

TOTAL_MEM_KB=`free | awk '/^Mem:/{print $2}'`

Answer 3

由于form-horizontal在bootstrap 4中没有按预期工作，所以你可以尝试这样做。

<div class="container">
    <div class="row">
        <div class="col-md-6 form-group row">
            <label class="d-inline control-label col-md-3 text-right">Full Name: </label>
            <div class="col-md-9">
                <input class="form-control" type="text" placeholder="First Name" formControlName="firstName">
            </div>

        </div>
        <div class="col-md-6">
            <h6>Some text</h6>
        </div>
    </div>
    <br>

    <div class="row">
        <div class="col-md-6 form-group row">
            <label class="d-inline control-label col-md-3 text-right">Email: </label>
            <div class="col-md-9">
                <input class="form-control" type="email" placeholder="Email" formControlName="email">
            </div>
        </div>
        <div class="col-md-6">
            <h6>Some text</h6>
        </div>
    </div>
</div>

对齐文本和输入，使它们整齐地垂直排列

3 个答案: