引导html使文本区域跨越窗体中的多个行。
引导html使文本区域跨越窗体中的多个行。
提问于 2018-03-26 12:15:48
如何使用引导集和行使文本区域跨越窗体中的多个行。
这是我意思的截图。
我希望"Notes“文本区域跨越两列到我用黄色突出显示的区域。
这是我到目前为止掌握的代码
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-4">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-4">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</form>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-26 12:22:12
基本上，您需要做的就是在元素周围添加另一个容器。
试试这个片段：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
<div class="form-row">
<div class="col-md-8">
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-1">input 1</label>
<input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
</div>
<div class="form-group col-md-6">
<label for="input-2">input 2</label>
<input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="input-3">input 3</label>
<input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
</div>
<div class="form-group col-md-6">
<label for="input-4">input 4</label>
<input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="text-content">Notes</label>
<textarea class="form-control" id="text-content" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-md-8">
<div class="float-right">
<button type="button" class="btn btn-primary" id="search">
Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
Stack Overflow用户
发布于 2018-03-26 12:19:45
您可以使元素使用4列并使其向右浮动，而使左侧元素浮动到左侧。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49491272
复制相关文章
相似问题
腾讯云开发者
