Html 如何使用boostrap以水平方式显示游戏列表？_Html_Css

Html 如何使用boostrap以水平方式显示游戏列表？

html css

Html 如何使用boostrap以水平方式显示游戏列表？,html,css,Html,Css,我是新的前端开发人员。。以垂直方式显示的游戏列表我还添加了一个boostrap链接并添加了一些类，但仍然以垂直方式显示，如下所示：游戏目录我想用boostrap在列中显示游戏列表在开始定义需要添加行作为父元素的列之前，请选中此链接。在此处了解更多信息：例如：满足于此我在这里修复了您的代码：您是否至少检查了Twitter引导文档？在开始引导之前，您应该阅读本页： .row{ 背景#f8f9fa；边缘顶部：10px； } 上校{ 边框：实心1px#6c757d；填充：1

我是新的前端开发人员。。以垂直方式显示的游戏列表我还添加了一个boostrap链接并添加了一些类，但仍然以垂直方式显示，如下所示：


游戏目录

我想用boostrap在列中显示游戏列表

在开始定义需要添加行作为父元素的列之前，请选中此链接。在此处了解更多信息：例如：


满足于此

我在这里修复了您的代码：

您是否至少检查了Twitter引导文档？在开始引导之前，您应该阅读本页：

.row{
背景#f8f9fa；
边缘顶部：10px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}


在此处插入游戏中的表单或DIV
在此处插入游戏中的表单或DIV
在此处插入游戏中的表单或DIV

在使用任何列类之前，您需要添加一个行类的类

<div> <div class="row"> //write col classes here </div> </div>

//在这里写col类
行类用于在一行中分割列。因此默认情况下，它以水平方式设置所有内容。有关更多详细信息，请参阅本文档
这是您要查找的确切代码

<html> <head><title>Game Catalog</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <form id="game_load0" method="post" action="play.php"> <input type="hidden" name="url" value=""> </form> <a href="#" target="_blank" onclick="document.forms['game_load0'].submit();" title="Biker Lane" style="padding-right: 8px;"> <img src="http://cdn.marketjs.net/games/biker-lane/localization/en/media/graphics/promo/icons/128x128.png"/></a> </div> <div class="col-md-6"> <form id="game_load1" method="post" action="play.php"> <input type="hidden" name="url" value=""> </form> <a href="#" target="_blank" onclick="document.forms['game_load1'].submit();" title="Wild West Shootout" style="padding-right: 8px;"> <img src="http://cdn.marketjs.net/games/wild-west-shootout/localization/en/media/graphics/promo/icons/128x128.png" /></a> </div> </div> </div> </body> </html>

游戏目录

通过使用此代码，一行中会出现两个图像。您可以根据需要更改右边的填充。
class=“row”
采用100%宽度，然后选择next
class=“col-3”
未分割。我的代码已更新。请检查并检查此项。您只需用您的表单和img替换“在此处插入表单或游戏分割”。在我的电脑中工作正常，我添加了输出图像和我的代码，请检查它。尝试在此运行此代码，并在全屏中预览结果。这是联机_bootstrap_editor.php屏幕，而不是您的笔记本电脑或台式机屏幕，您可以在本地服务器中尝试，因为它不是笔记本电脑和台式机screen@Hayamkhan我在本地服务器上也试过这个代码，我得到的结果与附件中的结果相同。我在用笔记本电脑。在你的本地服务器上试试这个。我也在本地服务器上试过我的笔记本电脑，但没有任何变化。奇怪的是，你使用的是windows操作系统还是其他操作系统？
<div> <div class="row"> //write col classes here </div> </div>

<html> <head><title>Game Catalog</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <form id="game_load0" method="post" action="play.php"> <input type="hidden" name="url" value=""> </form> <a href="#" target="_blank" onclick="document.forms['game_load0'].submit();" title="Biker Lane" style="padding-right: 8px;"> <img src="http://cdn.marketjs.net/games/biker-lane/localization/en/media/graphics/promo/icons/128x128.png"/></a> </div> <div class="col-md-6"> <form id="game_load1" method="post" action="play.php"> <input type="hidden" name="url" value=""> </form> <a href="#" target="_blank" onclick="document.forms['game_load1'].submit();" title="Wild West Shootout" style="padding-right: 8px;"> <img src="http://cdn.marketjs.net/games/wild-west-shootout/localization/en/media/graphics/promo/icons/128x128.png" /></a> </div> </div> </div> </body> </html>