我如何使ul响应与boostrap5内的div?



你好,我想让我的代码响应我正在做一个纸牌游戏,我需要使它响应,这是我的HTML代码:

<body>
<div id="tablero" class="container mt-3">
<div class="row">
<ul class="contenedorColumnas list-group  list-group-horizontal">
<li class="contenedorCartas1 list-group-item">
<ul id="columna1" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas2 list-group-item">
<ul id="columna2" class="columDisplay list-group  list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas3 list-group-item">
<ul id="columna3" class="columDisplay list-group  list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas4 list-group-item">
<ul id="columna4" class="columDisplay list-group   list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas5 list-group-item">
<ul id="columna5" class="columDisplay list-group  list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas6 list-group-item">
<ul id="columna6" class="columDisplay list-group" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas7 list-group-item">
<ul id="columna7" class="columDisplay list-group  list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
</ul>

<div id="mazos" class="col-sm">
<div id="mazo_Entrada"></div>
<div id="almacen"></div>
<div id="almacen2"></div>
<div id="almacen3"></div>
<div id="almacen4"></div>
</div>
</div>
</div>
<script src="js/solitario.js"></script>

由于某些原因,当我打开html没有响应,甚至工作一切看起来混乱

是否将bootstrap css导入到html中?

试着把这个添加到你的标题

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

最新更新