並排放置 div 元素
[英]Place div elements side by side
問題描述
有沒有辦法將 div 元素並排放置
<div style = "display: inline-block;" class="sev_border">
<h4>Se</h4>
<div class="row">
<h4></h4>
<div class="col-sm-12">
<div class="form-group shiny-input-container" style="width:600px;">
<label class="control-label" id="Is" for="Is">Is</label>
<div>
<select id="Is"><option value="" selected></option>
<option value="Not Applicable">Nble</option>
<option value="No Impact">Nct</option>
<option value="Low Impact">Loct</option>
<option value="Medium Impact">Medact</option>
<option value="High Impact">Higct</option></select>
<script type="application/json" data-for="Is">{"plugins":["selectize-plugin-a11y"]}</script>
</div>
</div>
</div>
</div>
<div class="row">
<h4></h4>
<div class="col-sm-12">
<div class="form-group shiny-input-container" style="width: 600px;">
<label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
<textarea id="SEVE3" class="form-control" style="width:width: 100%;;height:200px;"></textarea>
</div>
</div>
</div>
</div>
這里 selectinput 和 textinput 都放在一個下方，但是可以並排放置嗎
2 個解決方案
解決方案1
0 2021-11-26 05:30:42
<,doctype html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1:3/dist/css/bootstrap;min;css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6"> <select id="Is"> <option value="" selected></option> <option value="Not Applicable">Nble</option> <option value="No Impact">Nct</option> <option value="Low Impact">Loct</option> <option value="Medium Impact">Medact</option> <option value="High Impact">Higct</option> </select> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label> <textarea id="SEVE3" class="form-control" style="width: 100%;:height:200px."></textarea> </div> </div> </div> </section> <.-- Option 1. Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> </body> </html>
使用引導鏈接並以這種格式添加代碼
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<select id="Is">
<option value="" selected></option>
<option value="Not Applicable">Nble</option>
<option value="No Impact">Nct</option>
<option value="Low Impact">Loct</option>
<option value="Medium Impact">Medact</option>
<option value="High Impact">Higct</option>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
<textarea id="SEVE3" class="form-control" style="width: 100%;;height:200px;"></textarea>
</div>
</div>
</div>
解決方案2
0 2021-11-26 08:37:59
嘗試使用col-sm-6而不是col-sm-12因為它可以並排划分 2 列，所以在單行和內部使用兩次col-sm-6 。
有沒有辦法並排放置 div 元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.