对齐文本插件引导HTML

Question

I am trying to create a form using Bootstrap and I am having trouble getting the text in the addons to line up correctly. I want the addon size to be the same for every input group. Here is my 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>

Any help is greatly appreciated

Answer 1

If you are trying to get the width of the labels to be the same, you add to the css class like so:

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

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