I have a rather large form I am creating using BS3 that has checkboxes and input fields in the same row. As you can see it makes a mess in terms of spacing. The rows with all checkboxes are very close together vertically and the rows with both checkboxes and input fields are further apart vertically. I would like to either make the spacing of the rows with checkboxes larger or shrink the spacing between the rows that have both. Any thoughts would be welcome. Here is the html -
<form>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Following Directions -</b>
</label>
<label class="checkbox-inline">
<input type="checkbox"> Routine
</label>
<label class="checkbox-inline">
<input type="checkbox"> Single-Step
</label>
<label class="checkbox-inline">
<input type="checkbox"> Novel
</label>
<label class="checkbox-inline">
<input type="checkbox"> Multi-Step
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Understanding Language Concept/Attributes</b>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Identifying Vocabulary -</b>
</label>
<label class="checkbox-inline">
<input type="checkbox"> Nouns
</label>
<label class="checkbox-inline">
<input type="checkbox"> Actions
</label>
<label class="checkbox-inline">
<input type="checkbox"> Novel
</label>
<label class="checkbox-inline">
<input type="checkbox"> Attributes
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Working Memory</b>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Recalling Verbal Information</b>
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Processing Speed</b>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="checkbox-inline">
<input type="checkbox"> <b>Other -</b>
</label>
<label class="form-inline">
<textarea class="form-control input-sm" rows="1"></textarea>
</label>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Length of utterance/Expressive vocabulary</b>
</label>
</div>
<div class="col-sm-6">
<label class="form-inline">
Length of Utterance: <input type="text" class="form-control input-sm" id="">
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Not using conventional gestures</b> (Pushing away, pointing, etc.)
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Use of grammatical structures -</b>
</label>
<label class="form-inline">
Which Ones? <input type="text" class="form-control input-sm" id="" >
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Word Retrieval</b>
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Telling story in sequence/providing relevant details</b>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Answering Questions -</b>
</label>
<label class="checkbox-inline">
<input type="checkbox"> Yes/No
</label>
<label class="checkbox-inline">
<input type="checkbox"> WH Questions
</label>
<label class="checkbox-inline">
<input type="checkbox"> Asking Questions
</label>
</div>
<div class="col-sm-6">
<label class="checkbox-inline">
<input type="checkbox"> <b>Other -</b>
</label>
<label class="form-inline">
<textarea class="form-control input-sm" rows="1"></textarea>
</label>
</div>
</div>
</form>
Aucun commentaire:
Enregistrer un commentaire