Question

我正在尝试对齐表单并设置其样式。我的第一次尝试是

<form action="myUrl" class="form-horizontal" method="post">    
    <div class="form-group">
        <label class="control-label col-sm-2">Set ID</label>
        <div class="col-sm-4">
            <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Customer ID</label>
        <div class="col-sm-4 input-group">
            <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
            <span class="input-group-btn">
                <button class="btn btn-default lookup-button" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <input class="btn btn-default" type="submit" id="submit" value="Search">
    </div>
</form>

但是，我的两个文本框的左边缘对齐as seen here

我尝试将input-group添加到包含第一个文本框的div并解决了对齐问题，但它会导致文本框的角变为硬角而不是舍入{{} 3}}

<form action="myUrl" class="form-horizontal" method="post">    
    <div class="form-group">
        <label class="control-label col-sm-2">Set ID</label>
        <div class="col-sm-4 input-group">
            <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Customer ID</label>
        <div class="col-sm-4 input-group">
            <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
            <span class="input-group-btn">
                <button class="btn btn-default lookup-button" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <input class="btn btn-default" type="submit" id="submit" value="Search">
    </div>
</form>

我还尝试在我的第一个文本框中添加一个空的<span>以及input-group类。这会导致左角变圆，但右角保持方形。右边缘也会与as seen here

下方文本框的右边缘稍微不对齐

有没有办法可以让我的文本框在左边缘均匀对齐，同时让第一个文本框保持圆角（不在第一个文本框中添加多余的图标）？

Answer 1

你应该在另一个div中使用class input-group，这将解决输入行为的问题

请参阅代码段：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="myUrl" class="form-horizontal" method="post">
  <div class="form-group">
    <label class="control-label col-sm-2">Set ID</label>
    <div class="col-sm-4">
      <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
    </div>
  </div>
  <div class="form-group">

    <label class="control-label col-sm-2">Customer ID</label>
    <div class="col-sm-4">
      <div class="input-group">
        <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
        <span class="input-group-btn">
           <button class="btn btn-default lookup-button" type="button">
              <span class="glyphicon glyphicon-search"></span>
        </button>
        </span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2"></label>
    <div class="col-sm-4">
      <input class="btn btn-default" type="submit" id="submit" value="Search"> </div> 
    </div>
</form>

＆＃13;

Answer 2

试试这个

CSS

.lookup-button span.glyphicon{
  border-left:1px solid #e1e1e1;
  padding:8px;
}

HTML

<form action="myUrl" class="form-horizontal" method="post">

  <div class="form-group">
    <label class="control-label col-sm-2">Set ID</label>
    <div class="col-sm-5">
      <input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-sm-2">Customer ID</label>
    <div class="col-sm-5">
      <input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">   
    </div>
  </div>


    <div class="form-group">
      <button class="btn btn-default lookup-button" type="submit">
      submit
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </div>
</form>

我修改了你的一些HTML。在这里你不需要使用输入类型[提交]，只需将其替换为。它的功能相同。

我设置了提交按钮并组织了一些代码

Link for Reference

希望这有帮助

表单中的文本框对齐和边角样式

2 个答案: