个人中心
gpt4 book ai didi

html - 缩小标签的可点击区域

转载 作者：行者123 更新时间：2023-11-28 02:12:53 24 4
gpt4 key购买 nike

在下面的示例中，如果我使用标签作为 <label class="radio">然后单击单选按钮的区域，它会扩展到页面的整个宽度。

在该标签外(内联标签旁边)单击仍然会触发单选按钮。

我尝试将标签类别设为 inline .但是单选按钮排列成一个行。

还有其他 Bootstrap 吗 class可用于单选按钮/标签以将它们放在具有固定标签宽度的下一行中？

这是我的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>Form control: inline radio buttons</h2>
      <p>The form below contains three inline radio buttons:</p>
      <form>
        <label class="radio">
          <input type="radio" name="optradio">Option 1
        </label>
        <label class="radio">
          <input type="radio" name="optradio">Option 2
        </label>
        <label class="radio">
          <input type="radio" name="optradio">Option 3
        </label>
      </form>
    </div>
    
    </body>
    </html>

最佳答案

类似这样的东西可以用于桌面:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form style="display: grid">
    <label class="radio col-sm-2">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio col-sm-2">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio col-sm-2">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
</div>

</body>
</html>

:查看全页。

关于html - 缩小标签的可点击区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48646180/

24 4 0
文章推荐： c++ - 如何初始化构造函数初始化列表中 `std::vector` 对象的类成员 `std::unique_ptr`？
文章推荐： c++ - 在 C++ 中从键盘完成 cin
文章推荐： css - 使用 postcss 缩小多个输入文件
文章推荐： css - @Html.DisplayFor - 根据显示中的数据更改背景颜色