0
サイドボタン付きの入力フィールドが4つある単純なブートストラップページを作成しようとしています。 4つの入力フィールドは、水平に、画面中央に配置された行にあります。単純なブートストラップページでレイアウトとラップが正しくない
私が書いたコードでは、フィールドは右にオフセットされているため（中央にないので）、画面が縮小するとひどく見えます。私のコードは次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIA</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.wia-color {
color: #00DDDD;
}
.wia-navbar-logo {
margin-top: -6px;
max-height: 44px;
height: 44px;
}
.wia-top-section {
height: 800px;
background-color: transparent;
}
.wia-logo-strapline {
margin-top: 0px;
max-height: 123px;
height: 123px;
}
.wia-strapline-text {
color: white;
font-size: 40px !important;
font-family: Open Sans;
font-weight: 100;
font-style: normal;
margin-top: 38px;
}
.wia-filter-column {
width: 280px;
}
.wia-filter-row {
color: white;
margin-top: 50px;
font-size: 18px;
font-weight: 400;
}
.wia-filter-container {
width: 250px;
white-space: nowrap;
float:left;
}
.wia-filter-label {
color: white;
font-size: 18px;
font-weight: 200;
float: left;
padding-left: 10px;
margin-bottom: 4px;
}
.wia-filter-value {
value: 'xxx';
width: 200px;
height: 30px;
background-color: #141414;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 4px;
}
.wia-filter-button {
width: 30px;
height: 30px;
background-color: #222626;
color: #00DDDD;
border: none;
vertical-align: top;
margin-left: -5px;
font-weight:100;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.navbar-inverse {
background-color: #222626;
height: 64px;
max-height: 64px;
min-height: 64px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron wia-top-section">
<div class="container-fluid">
<div class="row wia-filter-row">
<div class="col-sm-2">
</div>
<div class="col-sm-2 wia-filter-column">
<div class="wia-filter-label">
What
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="One">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
Where
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Two">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
When
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Three">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
Who
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Four">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<div class="container wia-filter-label text-center">
SOME MORE STUFF
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>私はここにplunkerを作成しました：
https://plnkr.co/edit/V0KVM1J2xX1FRAiFYW16?p=preview
あなたは適切にブートストラップグリッドを使用していません。グリッドに自分の幅を与えているのはなぜですか？ – Aslam
最初に幅を与えずに試したが、レイアウトはさらに悪かった。 –
私の答えを確認してください – Aslam