对齐文本插件引导程序html

Align text addons bootstrap html

本文关键字：html 引导程序 插件 文本 对齐      更新时间：2023-09-26

我正试图使用Bootstrap创建一个表单，但在使插件中的文本正确排列时遇到了问题。我希望每个输入组的插件大小相同。这是我的html:

<div class="input-group"><span class="input-group-addon">Event Name</span><input type="text" class="form-control" placeholder="Ex. Bingo" id="event"></div>
<div class="input-group"><span class="input-group-addon">Mon</span><input type="text" class="form-control" placeholder="00:00" id="mon"></div>
<div class="input-group"><span class="input-group-addon">Tue</span><input type="text" class="form-control" placeholder="00:00" id="tues"></div>
<div class="input-group"><span class="input-group-addon">Wed</span><input type="text" class="form-control" placeholder="00:00" id="wed"></div>
<div class="input-group"><span class="input-group-addon">Thu</span><input type="text" class="form-control" placeholder="00:00" id="thurs"></div>
<div class="input-group"><span class="input-group-addon">Fri</span><input type="text" class="form-control" placeholder="00:00" id="fri"></div>
<div class="input-group"><span class="input-group-addon">Sat</span><input type="text" class="form-control" placeholder="00:00" id="sat"></div>
<div class="input-group"><span class="input-group-addon">Sun</span><input type="text" class="form-control" placeholder="00:00" id="sun"></div>

非常感谢您的任何帮助

如果你想让标签的宽度相同，你可以像这样添加到css类中：

.input-group-addon {
    width: 150px;
}

JSFiddle：http://jsfiddle.net/biz79/j2m9ng9p/

相关文章：