如何将 bootstrap 样式应用于内联 <select> 元素
How to apply bootstrap style to inline <select> element
我正在使用 Bootstrap 5 在 Thymeleaf 中创建页面。
至此,创建了两个部分。这部分有我想要的行为:
<main role="main" class="pb-3">
<br>
<p>Post office expenses</p>
<div class="row">
<div class="form-inline">
<div class="form-group">
<span>Year:</span>
<select id="selectYear" th:field="*{years}" onchange="getDaysInMonth()">
<option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
</select>
<span>Month:</span>
<select id="selectMonth" th:field="*{monthsList}" onchange="getDaysInMonth()">
<option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
</select >
<span>Day:</span>
<select name="selectDay" id="selectDay">
<option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
</select >
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-2">
<form>
<div class="form-group">
<label for="typeOfMail">Type of mail:</label>
<select class="form-select form-select-sm" id="typeOfMail">
<option>Letter</option>
<option selected>Reserved</option >
<option>Package</option>
<option>Fast delivery</option>
<option>Returned mail</option>
</select >
</div>
<div class="form-group">
<label for="destination">Destination:</label>
<select class="form-select form-select-sm" id="destination">
<option>Domestic</option>
<option>Foreign</option>
</select >
</div>
</form >
</div>
<div class="col-9 text-center">
<h2>Picture</h2>
</div>
</div>
</main>
</div>
我的问题是我找不到将年、月和日下拉菜单设置为类似于下面的样式的方法。我尝试使用 form-select 类 但随后它们会扩展到行尾。
我愿意接受任何关于如何设计它的建议。提前致谢。
关注the examples in the documentation:
<p>Post office expenses</p>
<div class="row g-3 align-items-center">
<label for="selectYear" class="col-auto">Year:</label>
<div class="col-auto">
<select id="selectYear" class="form-select" th:field="*{years}" onchange="getDaysInMonth()">
<option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
</select>
</div>
<label for="selectMonth" class="col-auto">Month:</label>
<div class="col-auto">
<select id="selectMonth" class="form-select" th:field="*{monthsList}" onchange="getDaysInMonth()">
<option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
</select>
</div>
<label for="selectDay" class="col-auto">Day:</label>
<div class="col-auto">
<select name="selectDay" id="selectDay" class="form-select">
<option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
</select>
</div>
</div>
我正在使用 Bootstrap 5 在 Thymeleaf 中创建页面。 至此,创建了两个部分。这部分有我想要的行为:
<main role="main" class="pb-3">
<br>
<p>Post office expenses</p>
<div class="row">
<div class="form-inline">
<div class="form-group">
<span>Year:</span>
<select id="selectYear" th:field="*{years}" onchange="getDaysInMonth()">
<option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
</select>
<span>Month:</span>
<select id="selectMonth" th:field="*{monthsList}" onchange="getDaysInMonth()">
<option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
</select >
<span>Day:</span>
<select name="selectDay" id="selectDay">
<option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
</select >
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-2">
<form>
<div class="form-group">
<label for="typeOfMail">Type of mail:</label>
<select class="form-select form-select-sm" id="typeOfMail">
<option>Letter</option>
<option selected>Reserved</option >
<option>Package</option>
<option>Fast delivery</option>
<option>Returned mail</option>
</select >
</div>
<div class="form-group">
<label for="destination">Destination:</label>
<select class="form-select form-select-sm" id="destination">
<option>Domestic</option>
<option>Foreign</option>
</select >
</div>
</form >
</div>
<div class="col-9 text-center">
<h2>Picture</h2>
</div>
</div>
</main>
</div>
我的问题是我找不到将年、月和日下拉菜单设置为类似于下面的样式的方法。我尝试使用 form-select 类 但随后它们会扩展到行尾。
我愿意接受任何关于如何设计它的建议。提前致谢。
关注the examples in the documentation:
<p>Post office expenses</p>
<div class="row g-3 align-items-center">
<label for="selectYear" class="col-auto">Year:</label>
<div class="col-auto">
<select id="selectYear" class="form-select" th:field="*{years}" onchange="getDaysInMonth()">
<option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
</select>
</div>
<label for="selectMonth" class="col-auto">Month:</label>
<div class="col-auto">
<select id="selectMonth" class="form-select" th:field="*{monthsList}" onchange="getDaysInMonth()">
<option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
</select>
</div>
<label for="selectDay" class="col-auto">Day:</label>
<div class="col-auto">
<select name="selectDay" id="selectDay" class="form-select">
<option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
</select>
</div>
</div>