html - 选择占用可用空间的

Question

我有以下代码:

[class*="col"] {
	background-color: lightblue;
	border: 1px dotted black;
}
.game {
    height: 80%;
    padding-top: 5%;
    padding-bottom: 5%;
}
.menu {
	height: 90%;
    margin: 10 10 0 10;
}
#main {
	    display:block;
	    width:100%;
	    height:100%;
	    margin: 0 0 0 0;
}
.s {
	height: 32px;
	width: 32px;
	background-color: azure;
	position: absolute;
}
.lfouk {
	height: 10%;
}
.hgt { 
	height: 100%;
}
form {
	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">	

<div class="container-fluid">
			<div class="row">
				
					<div class="col-xs-4 lfouk"></div>
					
					<div class="col-xs-1 lfouk"></div>
					<form class="col-xs-1 lfouk">
						<div class="row">
						    <div class="form-group">
						    <label for="select" class="col-lg-12 control-label text-center">Largeur</label>
						      <div class="col-lg-12">
						        <select  class="form-control" >
						          <option>Option 1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						    </div>
						  </div>
					</form>
					<form class="col-xs-1 lfouk">
						<div class="row">
						    <div class="form-group">
						    <label for="select" class="col-lg-12 control-label text-center">Hauteur</label>
						      <div class="col-lg-12">
						        <select  class="form-control" >
						          <option>Option 1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						    </div>
						  </div>
					</form>
					<form class="col-xs-1 lfouk">
						<div class="row">
						    <div class="form-group">
						    <label for="select" class="col-lg-12 control-label text-center">Départ</label>
						      <div class="col-lg-6">
						        <select  class="form-control" >
						          <option>Option 1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						      <div class="col-lg-6">
						        <select  class="form-control" >
						          <option>1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						    </div>
						  </div>
					</form>
					<div class="col-xs-1 lfouk">
						<div class="row">
						    <div class="form-group">
						    <label for="select" class="col-lg-12 control-label text-center">Arrivée :</label>
						      <div class="col-lg-6">
						        <select  class="form-control" >
						          <option>Option 1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						      <div class="col-lg-6">
						        <select  class="form-control" >
						          <option>1</option>
						          <option>Option 2</option>
						          <option>Option 3</option>
						        </select>
						      </div>
						    </div>
						  </div>
					</div>
					
					<div class="col-xs-3 lfouk">
						<div class="col-xs-6 lfouk"></div>
						<div class="col-xs-6 lfouk"></div>
					</div>
				
			</div>
		</div>

soo 在浏览器上执行，"départ"& "arrivée"selects selected selected options selected options are not visible due to the small size 有没有办法让选择占用更多空间？它工作得很好，但它在视觉上可能更漂亮

Answer 1

您将不得不更改您的 Bootstrap 类。

<form class="col-xs-1 lfouk">

如您所见，您使用的是 col-xs-1，它只使用了屏幕的十二分之一，因此可以尝试使用 col-xs-2 甚至 3