0
我有以下代碼：選擇需要的可用空間
[class*="col"] {
\t background-color: lightblue;
\t border: 1px dotted black;
}
.game {
height: 80%;
padding-top: 5%;
padding-bottom: 5%;
}
.menu {
\t height: 90%;
margin: 10 10 0 10;
}
#main {
\t display:block;
\t width:100%;
\t height:100%;
\t margin: 0 0 0 0;
}
.s {
\t height: 32px;
\t width: 32px;
\t background-color: azure;
\t position: absolute;
}
.lfouk {
\t height: 10%;
}
.hgt {
\t height: 100%;
}
form {
\t margin-bottom: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> \t
<div class="container-fluid">
\t \t \t <div class="row">
\t \t \t \t
\t \t \t \t \t <div class="col-xs-4 lfouk"></div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-xs-1 lfouk"></div>
\t \t \t \t \t <form class="col-xs-1 lfouk">
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="select" class="col-lg-12 control-label text-center">Largeur</label>
\t \t \t \t \t \t <div class="col-lg-12">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>Option 1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </form>
\t \t \t \t \t <form class="col-xs-1 lfouk">
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="select" class="col-lg-12 control-label text-center">Hauteur</label>
\t \t \t \t \t \t <div class="col-lg-12">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>Option 1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </form>
\t \t \t \t \t <form class="col-xs-1 lfouk">
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="select" class="col-lg-12 control-label text-center">Départ</label>
\t \t \t \t \t \t <div class="col-lg-6">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>Option 1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col-lg-6">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </form>
\t \t \t \t \t <div class="col-xs-1 lfouk">
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="select" class="col-lg-12 control-label text-center">Arrivée :</label>
\t \t \t \t \t \t <div class="col-lg-6">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>Option 1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col-lg-6">
\t \t \t \t \t \t <select class="form-control" >
\t \t \t \t \t \t <option>1</option>
\t \t \t \t \t \t <option>Option 2</option>
\t \t \t \t \t \t <option>Option 3</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="col-xs-3 lfouk">
\t \t \t \t \t \t <div class="col-xs-6 lfouk"></div>
\t \t \t \t \t \t <div class="col-xs-6 lfouk"></div>
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t </div>
\t \t </div>在瀏覽器上的「離開」 &「Arrivée酒店」選擇選擇的選項是不可見的，由於洙執行小尺寸 有沒有辦法讓選擇佔用更多的空間？它完美的工作，但它仍然可能在視覺上更美麗