HTML Bootstrap - 網格狀結構中的標簽和復選框

Question

我正在嘗試使用引導程序和 html 實現以下設計

我已經嘗試了所有方法，但我無法以任何一種方式設計不起作用。 下面的代碼。 請指教。 我無法通過引導程序獲得它，因此嘗試使用 HTML CSS。：

 body { font-size:1.5em; color: #2b2b2b; background:white; }.label-check input { display:none; }.label-check label::before { width: 1.4em; text-align: center; display: inline-block; cursor: pointer; color: black; transition: color.3s ease; text-shadow: 0px 0px 1px #cccccc; }.label-check label:hover::before { text-shadow: 0px 0px 1px #6286d0; }.label-check [type='checkbox']:checked + label::before, .label-check [type='radio']:checked + label::before{ color: #056dce; }

 <div class="label-check"> <p class="m3">File Type</p> <div> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">jpg</label> <label for="check1_Opt1">2</label> </div> <div> <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked> <label for="check1_Opt2">pdf</label> <label for="check1_Opt1">4</label> </div> <div> <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked> <label for="check1_Opt2">mp4</label> <label for="check1_Opt1">6</label> </div> </div> <hr> <p class="m3">Orientation</p> Horizontal &#10696; <br/> Vertical &#10696; <br/> Square &#10696; <br/> <br/>

Answer 1

如果您仍在尋找引導網格解決方案，您可以嘗試以下代碼

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="label-check container"> <p class="m3">File Type</p> <div class="row"> <div class="col"> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">jpg</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">pdf</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">tif</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> </div> <div class="col"> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">docx</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">png</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> <div class="row"> <div class="col"> <input type="checkbox" name="checkGrp1" id="check1_Opt1"> <label for="check1_Opt1">doc</label> </div> <div class="col text-right"> <label for="check1_Opt1">2</label> </div> </div> </div> </div> <hr> <p class="m3">Orientation</p> <div class="row"> <div class="col"> Horizontal </div> <div class="col text-right"> &#10696; </div> </div> <div class="row"> <div class="col"> Vertical </div> <div class="col text-right"> &#10696; </div> </div> <div class="row"> <div class="col"> Square </div> <div class="col text-right"> &#10696; </div> </div> </div>