我有两个HTML容器,但是因为我有span元素,然后是文本输入(我想这就是问题所在),我无法以我想要的方式获得容器中的内容。有没有办法在这些元素上增加边距或填充?或者有没有更简单的方法。在JSFiddle中,它们的跨度相当大,但我希望它们的大小约为下图所示。我使用的是bootstrap。
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE:https://jsfiddle.net/oy4u1sm9/4/
span格式化(当然,没有大跨度元素)
发布于 2018-08-11 19:07:25
使用<span>
标签作为标签不是最佳实践,因为它们是内联元素。尽量使用<label>
标签。这里是您的代码调整,以匹配您想要的样式。在下面的小提琴中有更多的评论。
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
为了清楚起见,我在代码中做了一些注释。这就是了:
发布于 2018-08-12 01:18:29
您只是包含了错误的引导程序文件。尝试一下,看看你的问题是否得到了解决。
<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">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/51798430
复制相似问题