问题描述

我正在使用bootstrap text-truncate。在下面的示例中，复选框和文本位于单独的行上。复选框后如何获取文本？

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"/>

</head>

<body class="body-bg-color">
    <div class="container">
        <div class="card" style="min-height: 10rem; width: 350px">
            <div class="card-header">Hello World</div>
            <ul id="issues" class="list-group list-group-flush list-group-mine">
                <li class="list-group-item">
                    <input type="checkbox" checked></input>
                    <label class="text-truncate" style="max-width: 100%">Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

解决方法

只需将 d-flex 类添加到您的复选框和标签的父级

在输入内容上加上标签

由于您的标签不包含for属性，因此该标签无法正确地应用于可访问性用户。您实际上可以使输入成为标签的子级。这将实现您的目标，并改善屏幕阅读器的使用体验，并使文本可点击，这是UX的普遍期望。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Hello World</title>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" />

</head>

<body class="body-bg-color">
  <div class="container">
    <div class="card" style="min-height: 10rem; width: 350px">
      <div class="card-header">Hello World</div>
      <ul id="issues" class="list-group list-group-flush list-group-mine">
        <li class="list-group-item"> <label class="text-truncate" style="max-width: 100%">
                    <input type="checkbox" checked></input>
                   Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

只需在两者的父div上使用flexbox。我还删除了标签的底部边距和标签上的一些边距，以将其向右移动。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"/>

</head>

<body class="body-bg-color">
    <div class="container">
        <div class="card" style="min-height: 10rem; width: 350px">
            <div class="card-header">Hello World</div>
            <ul id="issues" class="list-group list-group-flush list-group-mine">
                <li class="list-group-item d-flex justify-content-between align-items-center ">
                    <input type="checkbox" checked></input>
                    <label class="text-truncate ml-2 mb-0" style="max-width: 100%">Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.</label>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

bootstrap-4 javascript

如何在我的代码示例中将复选框和文本显示在同一行上

问题描述

解决方法

在输入内容上加上标签

相关问答