使用 Bootstrap4 对齐表单组件答案

【问题标题】：Aligning form component using Bootstrap4使用 Bootstrap4 对齐表单组件
【发布时间】：2018-06-02 21:07:56
【问题描述】：

我在 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 的新手。谢谢

【问题讨论】：

和手机一样，bio LABEL 和文本区域 div 需要提供 col-sm-2 而不是 mr-sm-2，它应该是
@HemaNandagopal 由于框位于 Bio 下方，因此无法正常工作。你可以在我的 jsfiddle 链接上试试。不成功。

标签： html css forms bootstrap-4

【解决方案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>

【讨论】：

谢谢。我在您的代码中看到了一些更改，带有 <div class="col-sm-1"> <div class="circle">i</div></div> 的更改具有魔力，并且实际上并不是必需的。 您能否解释一下这个圆圈是如何在 css 中没有任何边距的情况下成为 bio-text 的？
全部在网格布局中。由于 col-sm-2 col-sm-1 和 col-sm-9 位于同一行下，它们水平对齐。由于它们的宽度固定，col-sm-1 被推到靠近生物文本。

【解决方案2】：

根据您在小提琴中的示例，我已经设法按照您在此处指定的方式排列表格...https://jsfiddle.net/x8wmhfL9/4/

我所做的更改如下：

首先，我删除了扔东西的边距，例如盒子类
你在哪里用过 mr-sm- 我用过 col-sm- （我不确定 mr-sm- 是不是一个错字或者如果它是一个我不知道的类，但我知道 col-sm- 应该做你想做的）
我使用 form-group 而不是 form-inline，因为我发现我可以通过添加 display: inline-block; 来内联您的信息图标。到圈子班。
我在 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>

【讨论】：

感谢您的帮助。但也需要圆圈的边距。谢谢我解决了我的问题
为了简单起见，我退出了课程，一旦我开始工作，我应该把它放回去。无论如何，我很高兴我能提供帮助：D
是的。再次感谢热心指导！干杯队友:)

【解决方案3】：

只需查看jsfiddle link。

在标签 bio 中添加 col-sm-2 将解决此问题。还要从标签和文本区域中删除不必要的标签字段，如 inputBio 和 mr-sm-2 等类。

【讨论】：