0
Ich versuche, eine Tabelle Zeichenblatt in Bootstrap 3 zu entwickeln. In der Informationsbox im Bild unten, habe ich drei Inline-Formulare. Ich versuche, wohldefinierte Zeilen zu erstellen (aber nicht unbedingt gut definierte Spalten)Was verursacht nachfolgende .form-inline
Ich habe dieses Problem auf große (Ausrichtung erscheint meist gut auf meinem Tablet) Bildschirme, wo meine dritte .form-inline merkwürdig unter dem 2. ausgerichtet sitzt. Ich möchte, dass jedes form-inline vertikal getrennt ist (wie Zeilen), aber ich verstehe nicht, warum die separaten form-inline Divs dies nicht tun.
Ich habe meine Quelle und einige Bilder von meinem Problem unten zur Verfügung gestellt.
Auszug aus meiner Haupt-HTML-Datei
/*********************************************************************************/
/* Custom CSS */
/*********************************************************************************/
/#CharHeaderLine1 > div,
#CharHeaderLine2 > div,
#CharHeaderLine3 > div {
display: inline-block;
width: 20%;
}
#PFCharHeader > div {
display: inline-block;
}
#PFCharHeader {
padding: 1%;
}
#ClassesAndLevels > span,
input,
#AbilityScores,
#PFCharHeader {
display: inline-block;
}
#sidebar {
margin: 0px;
padding: 0px;
}
#CharHeaderInfoDiv {
background-color: ##f2f2f2;
padding: 1%;
border: 1px solid black;
}
#CharacterSheetBody {
background-color: #cccccc;
padding: 1%;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
/*
.col-md-4
{
\t margin: 0px;
\t color: #9d9d9d;
\t display: inline-block;
\t width: 20%;
}
*/
.ExpandableMenu [type="checkbox"] {
size: 50%;
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright {
position: relative;
padding: 3em 0em;
text-align: center;
color: #877850;
background: #62573b;
}
#copyright .container {} #copyright a {
text-decoration: none;
color: #877850;
}<div id="CharHeaderInfoDiv" class="col-md-8 col-sm-12 col-xs-12 panel">
<div id="CharHeaderLine1" class="form-inline">
<div class="TextFieldClass form-group col-md-4 CharInfoField" id="CharacterNameBox">
<label>Character Name</label>
<input class="form-control" type="text" value="Enter Character Name" />
</div>
<div id="AlignmentDropdownDiv" class="Dropdown Class col-md-7 col-md-offset-1">
<label>Alignment</label>
<div id="AlignmentAxis1Selector" class="row">
<div class="btn-group col-md-12 col-sm-12 col-xs-12" role="group" data-toggle="buttons">
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4">
<input type="radio" name="options" autocomplete="off" data-placement="left" title="Tooltip on left">Lawful
</label>
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4 active">
<input type="radio" name="options" autocomplete="off" checked>Neutral
</label>
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4">
<input type="radio" name="options" autocomplete="off">Chaotic
</label>
</div>
</div>
<div id="AlignmentAxis2Selector" class="row">
<div class="btn-group col-md-12 col-sm-12 col-xs-12" role="group" data-toggle="buttons">
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4">
<input type="radio" name="options" autocomplete="off">Good
</label>
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4 active">
<input type="radio" name="options" autocomplete="off" checked>Neutral
</label>
<label class="btn btn-default col-md-4 col-sm-4 col-xs-4">
<input type="radio" name="options" autocomplete="off">Evil
</label>
</div>
</div>
</div>
</div>
<div id="CharHeaderLine2" class="form-inline">
<div id="DeityDiv" class="col-md-3 col-lg-3 col-xl-3 form-group">
<label>Deity</label>
<input id="DeityField" class="form-control" type="text" value="Enter Deity" />
</div>
<div id="HomelandDiv" class="col-md-3 col-lg-3 col-lg-offset-1 col-xl-3 col-md-offset-1 form-group">
<label>Homeland</label>
<input id="HomelandField" class="form-control" type="text" value="Enter Homeland" />
</div>
<div id="RaceInfoDiv" class="col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 col-xl-3 form-group">
<label>Race</label>
<select class="form-control">
<option>Core | Dwarf</option>
<option>Core | Elf</option>
<option>Core | Gnome</option>
<option>Core | Half Elf</option>
<option>Core | Half Orc</option>
<option>Core | Halfling</option>
<option>Core | Human</option>
<option>Other</option>
</select>
</div>
</div>
<div id="CharHeaderLine3" class="form-inline">
<div id="SexDiv" class="col-md-2 col-lg-3 col-lg-offset-1 col-xl-3 form-group">
<label>Sex</label>
<select class="form-control">
<option>Male</option>
<option>Female</option>
<option>Intersex</option>
<option>None</option>
<option>Other</option>
</select>
</div>
<div id="AgeDiv" class="col-md-3 col-md-offset-1 col-lg-3 form-group">
<label>Age</label>
<div class="input-group">
<input id="AgeYearField" type="number" class="form-control" aria-label="Age">
<div class="input-group-addon">years</div>
</div>
</div>
<div id="HeightDiv" class="col-xs-12 col-sm-5 col-md-4 col-md-offset-1 col-lg-4">
<label>Height</label>
<div class="input-group">
<input id="HeightFtField" type="number" class="form-control" aria-label="HeightFeet">
<span class="input-group-addon">ft.</span>
<input id="HeightInField" type="number" class="form-control" aria-label="HeightInch">
<div class="input-group-addon">in.</div>
</div>
</div>
<div id="WeightDiv" class="col-md-3 col-sm-6 col-lg-3">
<label>Weight</label>
<div class="input-group">
<input id="WeightField" type="number" class="form-control" aria-label="Weight">
<div class="input-group-addon">lbs.</div>
</div>
</div>
<div id="HairColorDiv" class="col-md-4 col-md-offset-1 col-xs-6 col-lg-3">
<label>Hair</label>
<div class="input-group">
<input id="HairColorField" type="text" class="form-control" aria-label="Hair">
</div>
</div>
<div id="EyeColorDiv" class="col-md-4 col-xs-6 col-lg-3">
<label>Eyes</label>
<div class="input-group">
<input id="EyesColorField" type="text" class="form-control" aria-label="Eyes">
</div>
</div>
</div>
</div>Was dieses Problem verursacht werden könnte und warum?
können Sie eine Geige erstellen? – vel
Hier ist die Geige, aber es scheint nicht das gleiche Problem zu haben: https://jsfiddle.net/vb3hnqkf/ –
können Sie eine Geige mit Ihrem beschriebenen Problem erstellen? – vel