我正在尝试放置2nd div on the right side of the page。
所以显然第二个div应该在第一个div的右侧。目前是在第一个div下面，我想把它放在第一个div的右侧，并且应该保持响应
我正在尝试放置2nd div on the right side of the page。
所以显然第二个div应该在第一个div的右侧。目前是在第一个div下面，我想把它放在第一个div的右侧，并且应该保持响应
我怎样才能用css完成这项工作。
<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<--1st div -->
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
<--End of 1st div -->
<--2nd div -->
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
<--End of 2nd div -->
<--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
@foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
@endforeach
</ul>
<div class="tab-content">
@foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
@foreach($country->teams as $team)
<tr>
</tr>
@endforeach
</tbody>
</table>
</div>
@endforeach
</div>
</div>
</div>
</div>
<--End of 3rd div -->
</form>
</div>
</div>
答案 0 :(得分：1)
<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div --><div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div></div>
<!--End of 1st div -->
<!--2nd div --><div class="col-xs-12 col-sm-6">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div></div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
@foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
@endforeach
</ul>
<div class="tab-content">
@foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
@foreach($country->teams as $team)
<tr>
</tr>
@endforeach
</tbody>
</table>
</div>
@endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>
答案 1 :(得分：0)
您必须做出的改动很少：
您在某些行中使用了col-md，而对于其他人则使用了col-lg ..？通过提及col-lg, col-md, col-sm，为我的每个列提供所有尺寸支持，就像我在下面更改过一样。
您需要在同一行中的列需要包装在引导程序中的一个class="row"内。这就是为什么我为你的第一个和第二个div做了two columns with size col-8 and col-4并将它们包裹在行instead of the forms中的原因。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container col-lg-12 col-md-12 col-sm-12 col-12 col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div -->
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-8">
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label">Phone</label>
<div class="">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label"> Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
</div>
<!--End of 1st div -->
<!--2nd div -->
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9 col-sm-9 col-lg-9 col-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
@foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab">{!!$category->name!!}</a></li>
@endforeach
</ul>
<div class="tab-content">
@foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
@foreach($country->teams as $team)
<tr>
</tr>
@endforeach
</tbody>
</table>
</div>
@endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>