如何调整选择文本?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何调整选择文本?相关的知识,希望对你有一定的参考价值。
我必须减少表单字段的高度,它在除了被破坏的select选项之外的所有字段上都能正常工作。如果有一种方法可以将选项文本向上移动,这似乎是一个很好的解决方案。 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>
答案
将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>
以上是关于如何调整选择文本?的主要内容,如果未能解决你的问题,请参考以下文章