我尝试使用bootstrap和html实现以下设计我已经尝试了所有的方法,但我无法任何方式的设计是不工作。下面的代码。请建议。我不能得到它通过引导程序,所以尝试与HTML CSS。:第一个
pxiryf3j1#
如果您还在寻找一个bootstrap网格解决方案,您可以尝试以下代码
<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"> ⧈ </div> </div> <div class="row"> <div class="col"> Vertical </div> <div class="col text-right"> ⧈ </div> </div> <div class="row"> <div class="col"> Square </div> <div class="col text-right"> ⧈ </div> </div> </div>
1条答案
按热度按时间pxiryf3j1#
如果您还在寻找一个bootstrap网格解决方案,您可以尝试以下代码