Question

我必须减小表单字段的高度，除了选择选项被破坏之外，它在所有字段上都能正常工作。如果有一种向上移动选项文本的方法，这似乎是顶部填充与大小分开的解决方案。 https://jsfiddle.net/04uv38e7/

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm">
          <option>Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

将style="padding:0 7px 3px"添加到<select>标签。

如您所见：

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm" style="padding:0 7px 3px">
          <option >Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

如何调整选择选项文字？

1 个答案: