Question

我正在使用Bootstrap 3，我希望填充输入和选择字段保持对齐。在我的表单中，我以这种方式覆盖了bootstrap form-group-lg

＆＃13;

    .form-group-lg .form-control {
       letter-spacing: normal;
       text-indent: 0.25em;
       border-radius: 2px;
       color: #555555;
       font-size: 14px;
       line-height: 1.42857;
       min-height: 38px;
       height: 58px;
    }
    .form-group-lg select.form-control {
       height: 58px;
       line-height: 58px;
       padding-left 9px; /* force alignament with firefox, fail in IE e Chrome */
    }

＆＃13;

    <div class="row">
      <div class="col-md-12">
        <div class="form-group form-group-lg">
          <input class="form-control" name="name" placeholder="Name" type="text">
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group form-group-lg">
          <select class="form-control" name="City" required="">
            <option>City</option>
          </select>
        </div>
      </div>
    </div>

＆＃13;

不幸的是，我注意到如果我尝试强制选择字段中的填充左侧与输入字段的填充左侧对齐，则在每个浏览器中显示不同。

请参阅不同浏览器的示例 EXAMPLE

这个问题有解决办法吗？

Answer 1

使用text-indent属性而不是padding-left（它适用于所有浏览器（在chrome和firefox上测试））：

看你的例子：

＆＃13;

/* CSS used here will be applied after bootstrap.css */

.container {
  width: 300px;
  margin-top: 40px;
}
.form-group-lg .form-control {
  /*padding: 10px 16px;*/
  letter-spacing: normal;
  text-indent: 0.25em;
  border-radius: 2px;
  color: #555555;
  font-size: 14px;
  line-height: 1.42857;
  min-height: 38px;
  height: 58px;
}
.form-group-lg select.form-control {
  height: 58px;
  line-height: 58px;
  text-indent: 29px; // use this instead of padding-left
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group form-group-lg">
        <input class="form-control" name="name" placeholder="Name" type="text">
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group form-group-lg">
        <select class="form-control" name="City" required="">
          <option>City</option>
        </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

Bootstrap输入并选择padding-left跨浏览器问题

1 个答案: