Question

我是新手。我实际上想制作一个看起来像的标记，

所以，我尝试了以下方式

 <div className="row">
    <div className="col-xs-4">
      <div className="has-feedback">
        <label className="control-label">Search Job</label>
          <input type="text" className="form-control" id="inputValidation" placeholder="Search"/>
               <span className="glyphicon glyphicon-search form-control-feedback"></span>
         </div>
      </div>
</div>

现在，在这里，我得到的是

有人可以帮我吗？

Answer 1

这是您的完整代码：）

<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
  .mi-abc {
    padding: 10px;
    display: inline-block;
    background: lightgrey;
  }
  .mi-control {
    width: 75%;
    height: 35px;
    padding-left: 10px;
  }
  .mi-icon {
    position: absolute;
    right: 30px;
    top: 20px;
  }
</style>
</head>
<body>        
  <div class="col-md-3 mi-abc">
    <div class="wrapper">
      <label class="mi-label">Search Job</label>
      <input type="text" class="mi-control" placeholder="Search"/>
      <span class="glyphicon glyphicon-search mi-icon"></span>
    </div>
  </div>        
</body>

Answer 2

您可以使用float属性。

.control-label,.form-control{
        float:left;
    }

它将为您放置左侧的元素。因此标签首先出现，然后输入将出现在其右侧

您也可以使用flex

Answer 3

<div class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Search</label>
    <input type="text" readonly class="form-control" id="staticEmail2" value="" placeholder="search">
  </div>
  </div>

Bootstrap Form page

Answer 4

请使用“ class”而不是“ className”，您可以使用引导文档中已经可用的“ pull-left”类。您可以使用以下链接作为参考。

https://getbootstrap.com/docs/4.0/components/forms/

Answer 5

如上所述，最好的方法是使用.has-feedback上的flex属性，如下所示：

.has-feedback{
  display: flex;
}

默认情况下，这会将子元素水平对齐。

您也可以左右float个.has-feedback的孩子。

但是，如果您选择浮动子项，则准备清除.has-feedback，以便它可以计算出其子项周围的高度。您可以在此处找到有关如何执行此操作的示例：https://css-tricks.com/snippets/css/clear-fix/

在中心对齐表格中的项目

5 个答案: