HTML 文本框前面的复选框及其大小

Question

这是我的 HTML 代码：

 <div class="input-group mb3">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                        {% if item.complete == True %}
                            <input type="checkbox", value="clicked", name="c{{item.id}}" checked>
                        {% else %}
                            <input type="checkbox", value="clicked", name="c{{item.id}}">            
                        {% endif %}
                        </div>
                    </div>
                    <input type="text" value="{{item.text}}" class="form-control">
                </div>

我在文本框之前添加了复选框，但它们的大小与您看到的不一样。

我是否必须更改它们的高度（可能是宽度）值才能使它们相等，或者我是否遗漏了其他内容？顺便说一句，我正在使用 CSS（我是 HTML 的新手，请不要苛刻 :D ）。它与那个有关吗？或者它的来源？

CSS:

  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

和脚本：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

谢谢！

Answer 1

经过一些尝试，我发现 CSS 的版本导致了问题。

将我的来源更改为：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

解决了我的问题。

HTML 文本框前面的复选框及其大小

HTML checkbox prepended to textbox and their sizes

html

css

django

checkbox

textbox