gpt4 book ai didi

html - 如何使用 Bootstrap 以水平方式显示游戏列表?

转载 作者:太空宇宙 更新时间:2023-11-04 06:35:55 25 4
gpt4 key购买 nike

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

<html>
<head><title>Game Catalog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
</head>
<body>

<div class="container">
<div class="col-12">
<div class="col-3">
<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: 12px;">
<img src="http://cdn.marketjs.net/games/biker-lane/localization/en/media/graphics/promo/icons/128x128.png" style="width: 200px; height: 200px;"/></a>
</div>
<div class="col-3">
<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: 12px;">
<img src="http://cdn.marketjs.net/games/wild-west-shootout/localization/en/media/graphics/promo/icons/128x128.png" style="width: 200px; height: 200px;"/></a>
</div>
</div>
</div>
</body>
</html>

我想要使用 boostrap 以列方式显示的游戏列表

检查此链接 https://codepen.io/anon/pen/BveNJj

最佳答案

在开始定义列之前,您需要添加行作为父元素。在此处了解更多信息:Bootstrap Docs示例:

<div class="row">
<div class="col-md-3">
Content Here
</div>
</div>

我在这里修复了你的代码: https://codepen.io/anon/pen/WLBbMV

关于html - 如何使用 Bootstrap 以水平方式显示游戏列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54231562/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com