html - 使用 Bootstrap4 对齐表单组件

Question

我在 bootstrap4 的帮助下制作了一个表单，它必须是这样的:

因为我已经通过阅读Bootstrap4中的内容完成了作业阅读.并尽我所能来制作这样的表格，但毕竟，我没有得到想要的结果。我已经使用 来获得结果，但没有运气。

这是我到目前为止尝试过的代码:

Mypage.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
   <form>
    <div class="form-group row">
      <label for="inputPhone" class="col-sm-2 col-form-label">Phone</label>
      <div class="col-sm-10">
        <input type="number" class="form-control box" id="inputPhone" placeholder="Phone Number">
      </div>
    </div>


    <div class="form-inline">
      <label class="mr-sm-2">Bio</label>
      <div class="circle">i</div>

      <label for="inputBio" class="mr-sm-2"></label>
      <div class="col">
        <textarea class="form-control bio-text" id="inputBio" rows="3" placeholder="Your Bio"></textarea>
      </div>
    </div>
   </form>
 </div>

CSS 代码

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 28px }

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
       line-height: 20px; text-align: center; background: rgb(162, 197, 252); margin-left: 50px}

这是我尝试过的代码的链接:JSFiddle code for the form

我还从我的浏览器中截取了如下所示的屏幕截图:

任何帮助将不胜感激。请将我视为学习者，因为我是网络新手，而且是 bootstrap4 新手。谢谢

Answer 1

对布局做了一些小改动。似乎输出是你需要的。 :)

.form-container { max-width: 449px }
.box { margin-left: 82px }

.bio-text { height: 91px; margin-left: 85px;}

input[type="number"] {border: 2px solid #b1b1b1; padding: .55rem .75rem} 
textarea {border: 2px solid #b1b1b1; padding: .55rem .75rem}

.circle { width: 22px; height: 22px; border-radius: 50%; color: white;
           line-height: 20px; text-align: center; background: rgb(162, 197, 252); }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="form-container">
<form>
        <div class="form-group row">
        <div class="col-sm-2 col-form-label">
        <label for="inputPhone" >Phone</label>
        </div>
          <div class="col-sm-1">
          
          </div>
          <div class="col-sm-9">
            <input type="number" class="form-control " id="inputPhone" placeholder="Phone Number">
          </div>
        </div>
        
        
        <div class="form-group row">
          <div class="col-sm-2">
          <label >Bio</label>
          
          </div>
          <div class="col-sm-1">
          <div class="circle">i</div>
          <label for="inputBio" ></label>
          </div>
          <div class="col-sm-9">
          
            <textarea class="form-control " id="inputBio" rows="3" placeholder="Your Bio"></textarea>
          </div>
        </div>
        </form>
        </div>