ブートストラップ3に卓上文字シートを作成しようとしています。 以下の情報ボックスには、3つのインラインフォームがあります。以降の.form-inlineの原因
私の第3の.form-inline
が2番目の位置に不思議な位置に配置されている場合、大きな問題(整列はほとんどの場合、タブレットでうまく表示されます)の画面が表示されます。私は各フォームインラインを(行のように)垂直に区切りたいが、別のform-inline
divがこれをしていない理由を理解していない。
私は自分のソースと下の私の問題の写真を提供しました。この問題を引き起こして、なぜ何ができるか、私のメインのHTMLファイルから
抜粋
/*********************************************************************************/
/* 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>
?
あなたはフィドルを作成できますか? – vel
ここではフィドルですが、同じ問題はないようです:https://jsfiddle.net/vb3hnqkf/ –
あなたの問題を説明したフィドルを作成できますか? – vel