色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么我的可折疊文本顯示在范圍附近而不是范圍內？

CSS
錢淋西2年前8瀏覽0評論

嘗試使用Bootstrap collapsibles。我希望我的可折疊信息顯示在圖片下方，在span classed & quot游戲容器& quot。相反，它在它旁邊產卵。這里是& quot最小可再現性& quot我的問題示例:

<head>
<link rel = "stylesheet" type="text/css" href="style.css">
<meta name = "viewport" content = "width=device-width, intial-scale=1.0">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class ="flex-container">
    
    <a href ="#oblivion" data-toggle="collapse"><span class = "gameContainer"><img src = "https://upload.wikimedia.org/wikipedia/en/4/4b/The_Elder_Scrolls_IV_Oblivion_cover.png" class = "game">
    </a>
        <span id = "oblivion" class="collapse">
        <br>
        Elder Scrolls IV: Oblivion
    </span>
    <!-- only if you put the "a" tag down here rather than up there does it come out right(ie)
    show up below the game's pic.  This is true if the tag for the "oblivion" span is span or a div-->
</span>
    


</div>
</body>

這是CSS:

body
{
    padding: 20px 40px;
}

img
{
    width: 150px;
}

.gameContainer
{
    padding: 40px;
    margin:  0px 20px;
    display: inline-block;
}

.gameContainer:hover
{
    background-color: hsl(0, 0%, 70%);
    border-radius:10px;
    
}

.game
{
    border-radius: 10px;
}   

.flex-container
{
     display: flex;
}

# # #只需將伸縮方向設置為列即可:

.flex-container
{
  display: flex;
  flex-direction: column;
}