选择占用可用空间

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”＆amp;由于尺寸较小，“arrivée”选择的选项不可见 有没有办法让选择占用更多空间？它完美地工作，但它仍然可以在视觉上更美丽

Answer 1

您必须更改引导类。

while read -r mnt; do
   grep -h -i -A 3 -B 4 "${mnt}" *log | grep -v "10001"    
done < "${file.txt}" >> extrafile.txt

正如您所看到的，您使用的是col-xs-1，这只使用了屏幕的十二分之一，因此可能尝试使用col-xs-2甚至3