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

Answer 2

从你的小提琴中的例子开始，我已经设法排列了你在这里指定的表格... https://jsfiddle.net/x8wmhfL9/4/

我所做的更改如下：

• 首先，我删除了抛出诸如box类之类的东西的边距
• 你曾经使用过mr-sm-我曾经使用过col-sm-（我不确定mr-sm-是一个错字或是否是一个我不知道的类，但我知道col-sm-应该做什么你要）
• 我使用form-group而不是form-inline，因为我发现只需添加display：inline-block就可以内联你的info图标;到圆圈类。
• 我在Bio文本和信息图标周围放置了一个类，以帮助将它们排列到手机标签宽度
• 我将col-sm-2更改为col-sm-3，将col-sm-10更改为col-sm-9，因为这在我工作的分辨率下效果更好，但您可能会发现原始列大小最适合您。

我希望这很有帮助，并且我已经足够好地解释了我的变化，以便您了解我做出这些决定的原因。

.form-container {
  max-width: 449px
}

.bio-text {
  height: 91px;
}

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);
  display: inline-block;
}

<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-3 col-form-label">Phone</label>
      <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-3">
        <label class="">Bio</label>
        <div class="circle">i</div>
      </div>


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

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

Answer 3

只需看看jsfiddle link。

在标签bio中添加col-sm-2将解决问题。同时从标签和textarea中删除不必要的标签字段，如inputBio和类，如mr-sm-2。