我有一个选择字段和两个输入字段,但选择标签比其他两个大(见图)。我正在使用 Bootstrap 4.3。有人可以帮我让它和另一个一样大吗?非常感谢您的帮助!
这是我的代码:
<div class="container content-center" id="margin">
<form name="formcalc">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
<select class="col-sm-10 form-control" id="mySelect" onchange="myFunction();setOne();">
<option value="0">CHF 0</option>
<option value="75000">CHF 75'000</option>
<option value="100000">CHF 100'000</option>
</select>
</div>
<fieldset disabled>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
</div>
</div>
</fieldset>
<button type="button" class="btn btn-outline-danger" id="toggle" data-toggle="modal"
data-target="#exampleModal">
button
</button>
</form>
<hr class="featurette-divider">
<section class="container">
<p class="lead" id="demo"></p>
</section>
</div>
最佳答案
而不是给出 col-sm-10
在 select
上元素,包装 select
在<div class="col-sm-10">
- 请参阅下面的演示:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container content-center" id="margin">
<form name="formcalc">
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
<div class="col-sm-10">
<select class="form-control" id="mySelect" onchange="myFunction();setOne();">
<option value="0">CHF 0</option>
<option value="75000">CHF 75'000</option>
<option value="100000">CHF 100'000</option>
</select>
</div>
</div>
<fieldset disabled>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Output 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
</div>
</div>
</fieldset>
<button type="button" class="btn btn-outline-danger" id="toggle" data-toggle="modal" data-target="#exampleModal">
button
</button>
</form>
<hr class="featurette-divider">
<section class="container">
<p class="lead" id="demo"></p>
</section>
</div>
关于html - 选择输入大于 Bootstrap 4 中的输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54671749/