时间戳

首页 > 解决方案 > Bootstrap 中的选项卡式复选框

html - Bootstrap 中的选项卡式复选框

问题描述

所以我似乎无法弄清楚如何自然地将 Bootstrap 上的复选框隔开，所以我想看看 Bootstrap 4 中是否有任何实现可以做到这一点。

这就是我所拥有的：

    <div class="custom-control custom-radio mt-3">
        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required>
        <label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label>
        <div class="invalid-feedback">
            Select what information you would like deleted.
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <i>You must specify the personal information you would like us to delete:</i>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]">
                <label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
            </div>
        </div>
    </div>

在此处输入图像描述

我想让最后一行隔开 - 我怎么能做到这一点？

标签： htmlcsstwitter-bootstrap

解决方案

我不确定我是否 100% 理解了您正在寻找的“间隔”，但如果需要简单的缩进，则可以通过ml-5在最后一行添加 (Bootstrap 的 'margin-left' 属性) 来实现此结果。

有关 BS 间距的更多信息：https ://getbootstrap.com/docs/4.0/utilities/spacing/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>

	<style>
		
    </style>

  </head>
  
  <body>
  
   <div class="custom-control custom-radio mt-3">
        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required>
        <label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label>
        <div class="invalid-feedback">
            Select what information you would like deleted.
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <i>You must specify the personal information you would like us to delete:</i>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]">
                <label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
            </div>
        </div>
    </div>
    <div class="row mt-3 ml-5">
        <div class="col-sm-1"></div>
        <div class="col-sm-11">
            <div class="custom-control custom-switch ">
                <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">
                <label class="custom-control-label" for="rtd3Transaction">Need spaced</label>
            </div>
        </div>
    </div>

如果我误解了您要查找的内容，请回复我:)

推荐阅读