代码之家 › 专栏 › 技术社区 › Chris Doyle

Bootstrap单选内联输入列和换行文本

bootstrap-4 css html

Chris Doyle · 技术社区 · 4 年前

如何让引导程序将我的单选表单对齐,将我的问题和三个答案分成4列,如col-sm-3。当文本过长时,我希望它能将其包裹在每一列中。示例表格如下。

<!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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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 class="form-check-inline">
    <label class="control-label">This is some question: </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
    </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
    </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
    </label>
  </form>
</div>

</body>
</html>

我希望将复选框拆分为列并包装输入文本

Form control: inline radio buttons
The form below contains three inline radio buttons:

This is some question: | Option 1 which is really long       | Option 2 is a small | option Option 3 is another long option which
                       | and spans most of the page compared |                     | i would prefer was wordwrapped and options 
                       | to the other options                |                     | divided equally over

这个 | 我在这里添加char只是为了指示列,我不希望它们实际出现在输出中。

0 回复 | 直到 4 年前

franklylately 4 年前

您没有正确使用容器行列类-- <div class="container"><div class="row"><div class="col-xs-12">... 请参阅 Bootstrap 3.4.1 documentation 了解更多信息。

此外,最新的Bootstrap版本是4.6,其中5.0处于公测阶段,请考虑更新您的Boostrap版本。

<!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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Form control: inline radio buttons</h2>
      <p>The form below contains three inline radio buttons:</p>
    </div>
  </div>
  <form class="form-check-inline row">
    <div class="col-xs-3">
      <label class="control-label">This is some question:</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
    </div>
  </form>
</div>

</body>
</html>