Question

我正在尝试在联系表单旁边移动我的字体真棒图标，而不是在表单的顶部 - 请参阅图片。

您能告诉我如何更改表单的长度/宽度吗？我感觉太久了。这是我的代码。

.container {
  margin-left: 15em;
}

.bigicon {
  font-size: 35px;
  color: #FFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
              <div class="col-md-8">
                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
              <div class="col-md-8">
                <input id="email" name="email" type="text" placeholder="Email" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
              <div class="col-md-8">
                <textarea class="form-control" id="message" name="message" placeholder="Message" rows="7"></textarea>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要课程row才能使用col-*

<div class="row form-group">

替换

<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>

与

<div class="col-md-auto"><i class="fa fa-user bigicon"></i></div>

Play it here

最小解决方案

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
                        <div class="row align-items-center">
                            <div class="col-auto"><i class="fa fa-user bigicon"></i></div>
                            <div class="col">
                                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                            </div>
                        </div>
</div>

您也可以尝试输入组

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="well well-sm">
                <form class="form-horizontal" method="post">
                    <fieldset>


                        <div class="row align-items-center no-gutters">
                            
                            <div class="col-md-8">
                              <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-user bigicon"></i></span>
                                  </div>
                                  <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                                </div>

                                
                            </div>
                        </div>
                        
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 2

试试这个代码段。我在占位符中添加了图标。

.container {
  margin-left: 15em;
}

.bigicon {
  font-size: 35px;
  color: #808080;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: calc(50% - 0.5em);
  /* Keep icon in center of input, regardless of the input height */
}

input {
  padding-left: 17px;
}

.form-control {
  text-indent: 1.2rem;
}

.input-wrapper {
  position: relative;
}

<link href="https://bootswatch.com/4/cyborg/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <div class="col-md-8">
                <div class="input-wrapper">
                  <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                  <label for="fname" class="fa fa-user input-icon bigicon"></label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                  <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <textarea class="form-control" id="message" name="message" placeholder="Message" rows="1"></textarea>
                  <label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 3

自从我使用Bootstrap以来已经有一段时间了，但我猜你需要将<span></span>变成<div></div>，以便BootStrap可以正确处理定位。

联系表单旁边的Bootstrap 4字体真棒图标

3 个答案: