Html 调整窗口大小时制表符未正确对齐
我试图使我的标签在所有尺寸下都像这样(图1)。然而,当我调整标签大小时,它们看起来是这样的(图2)。我怎样才能修好它? 这是我的小提琴: 我的HTML代码:Html 调整窗口大小时制表符未正确对齐,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我试图使我的标签在所有尺寸下都像这样(图1)。然而,当我调整标签大小时,它们看起来是这样的(图2)。我怎样才能修好它? 这是我的小提琴: 我的HTML代码: <div class="Container"> <div class="row"> <div class="panel panel-center"> <div class="panel-header"> <h1>Job Categ
<div class="Container">
<div class="row">
<div class="panel panel-center">
<div class="panel-header">
<h1>Job Category</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/bankinglogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/engineerlogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/healthcare.png" width="180px" >
<p class="bankingl">Healthcare</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/technicia.png" width="185px" >
<p class="bankingl">IT</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/oilandgas.png" width="200px" >
<p class="bankingl">Oil and Gas</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/retail.png" width="180px" >
<p class="bankingl">Retail and Hospitality</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="panel panel-default jobPanel center-block">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs nav-justified selected">
<li class="active"><a href="#tab1" data-toggle="tab">Job Search</a>
</li>
<li><a href="#tab2" data-toggle="tab">PYW</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> <a href="#" class="btn btn-primary" role="button">Search</a>
</div>
</div>
</form>
</div>
<!--end of tab 1-->
<div class="tab-pane" id="tab2">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> <a href="#" class="btn btn-primary" role="button">Search</a>
</div>
</div>
</form>
</div>
<!--end of tab 2-->
</div>
<!--end of tab content-->
</div>
<!-- end of tabbable-->
</div>
<!--end panel body-->
</div>
<!-- end of formTab -->
</div>
<!--end of panel container-->
<script src="bootstrap/js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</div>
工作类别
-
-
关键词
地方
关键词
地方
引导采用移动优先的方法,您提供的代码不显示登录和注册选项卡或字段 但是看看你的HTML标记,我可以清楚地告诉你你缺少的一件事 类
.col sm-*
,col md-*
,col lg-*
,因为引导首先是移动的,所以类col xs-*,是您可能要添加到HTML标记中的类
所以我猜如果你的标记看起来像:
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
进一步阅读:。1)您向我们展示的代码输出与图片中的不同。2) 在JSFIDLE中,选项卡的显示方式与您希望的一样(如果屏幕很小,它们不会进入新行)
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>