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/

我所做的更改如下：

首先，我删除了抛出诸如此类内容的边距方框类
你曾经使用过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，只是因为这在我工作的分辨率下效果更好，但您可能会发现原始列大小最适合你。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

只需看jsfiddle link即可。

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

使用Bootstrap4对齐表单组件

3 个答案: