我正在尝试从twitter bootstrap创建网页。我在那里使用了卡和表属性。我遇到的问题是我的表显示在卡下面。我尝试添加float-right float-left类，但这不起作用。我想要卡片向左浮动，桌面在右侧大屏幕上，并且都响应小屏幕。任何想法我怎么能这样做？
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
修改了您的HTML代码。您已将card和table col-md-4放在一起。
我改变了它
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<div class="container">
<div class="row">
<div class="col-md-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
</div>
<div class="col-md-4">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
答案 1 :(得分：0)
请使用此代码，它对我有用，这完全响应：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name"
style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header">
<i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon">
<a href="" style="text-decoration: none;">
<i class="fa fa-amazon" style="color: #0E0B16;"></i>
Amazon</a>
</button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" style="text-decoration: none;">
<img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay </button>
<button type="button" class="btn btn-lg btn-outline-secondary flab">
500
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB
<br> Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE
<br> 4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td>
<span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)
<br>
<span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core
<br> Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>