英文:
My bootstrap column not working on small screen
问题
在小屏幕尺寸下，我的按钮不显示。我希望在小屏幕上按钮会一个接一个地显示。我需要做哪些更改以在小屏幕上使按钮一个接一个地显示。
<body>
<div class="top">
<div class="content">
<h1>Welcome To <br /><span class="fancy">Fantasy Talk</span></h1>
<div class="row">
<div class="col-md-4">
<button onClick="window.location.href='dothraki.html';">
Dothraki
</button>
</div>
<div class="col-md-4">
<button onClick="window.location.href='valyrian.html';">
Valyrian
</button>
</div>
<div class="col-md-4">
<button onClick="window.location.href='sindarin.html';">
Sindarin
</button>
</div>
</div>
</div>
</div>
</body>
button {
font-family: 'Almendra SC', serif;
transition: 0.5s;
padding: 15px 60px;
text-decoration: none;
font-size: 2vw;
position: absolute;
border-radius: 5px;
top: 50%;
transform: translate(-50%, -50%);
border: 1px;
transition: all 0.2s ease-in-out;
color: rgba(255, 255, 255, 0.8);
background: #146C94;
}
@media (max-width: 768px) {
button {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}
上述更改会使在小屏幕上按钮逐个显示，并且按钮会占据整个宽度。
英文:
My buttons inside bootstrap columns not appearing when the screen size is small.
I wanted the buttons to appear one below the other when screen size is small.
What changes should I make to get my buttons one below each other on a small screen.
full screen
small screen
adding the html code below:
<body>
<div class="top">
<div class="content">
<h1>Welcome To <br /><span class="fancy">Fantasy Talk</span></h1>
<div class="row">
<div class="col-md-4">
<button onClick="window.location.href='dothraki.html';">
Dothraki
</button>
</div>
<div class="col-md-4">
<button onClick="window.location.href='valyrian.html'; ">
Valyrian
</button>
</div>
<div class="col-md-4">
<button onClick="window.location.href='sindarin.html';">
Sindarin
</button>
</div>
</div>
</div>
</div>
</body>
**Adding CSS code: **
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
/* cursor: url(https://cur.cursors-4u.net/games/gam-11/gam1090.png),auto; */
cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1229.png),auto;
}
.top{
width: 100%;
height: 100%;
padding: 2rem;
position:absolute;
background-image: url(image/img1.jpg);
background-position: center;
background-size: cover;
text-align: center;
justify-content: center;
animation: change 13s infinite ease-in-out;
}
button{
font-family: 'Almendra SC', serif;
transition: 0.5s;
padding: 15px 60px;
text-decoration: none;
font-size: 2vw;
position: absolute;
border-radius: 5px;
top: 50%;
transform: translate(-50%, -50%);
border: 1px;
transition: all 0.2s ease-in-out;
color: rgba(255, 255, 255, 0.8);
background: #146C94;
}
button:hover{
margin-top: -10px;
color: rgba(255, 255, 255, 1);
/* box-shadow: 0 5px 15px rgba(145, 92, 182, .4); */
box-shadow: 0 5px 15px #39B5E0;
}
@keyframes change{
0%{
background-image: url(image/img6.jpg);
}
20%{
background-image: url(image/img2.jpg);
}
40%{
background-image: url(image/img3.jpg);
}
60%{
background-image: url(image/img4.jpg);
}
80%{
background-image: url(image/img5.jpg);
}
100%{
background-image: url(image/img6.jpg);
}
}
h1{
padding: 2rem;
color:white;
font-family: 'Spirax', cursive;
font-size: 5vw;
text-transform: uppercase;
text-align: center;
line-height: 1;
}
.fancy{
font-size: 8vw;
}
答案1
得分: 0
不要回答我要翻译的问题。以下是已翻译的内容：
替代尝试单独定位每个按钮在页面中央，将整个按钮行定位。这将允许您更好地使用Bootstrap列。您还遗漏了额外小尺寸（*col-12*）和小尺寸（*col-sm-12*）列断点。
使用此HTML替换您的HTML（Bootstrap 5）：
```html
<div class="row gy-3 position-absolute top-50 start-50 translate-middle w-100">
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='dothraki.html';">Dothraki</button>
</div>
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='valyrian.html';">Valyrian</button>
</div>
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='sindarin.html';">Sindarin</button>
</div>
</div>
然后，使用以下CSS替换您的按钮CSS（删除按钮定位）：
button {
font-family: 'Almendra SC', serif;
transition: 0.5s;
padding: 15px 60px;
text-decoration: none;
font-size: 2vw;
border-radius: 5px;
border: 1px;
transition: all 0.2s ease-in-out;
color: rgba(255, 255, 255, 0.8);
background: #146C94;
}
此外，如果按钮只用于将用户导航到页面，我建议您将按钮替换为锚标签。
<details>
<summary>英文:</summary>
Instead of trying to position each button individually in the middle of the page, position the entire row of buttons. This will allow you to use Bootstrap columns better. You were also missing the the extra-small (*col-12*) and small (*col-sm-12*) column breakpoints.
Replace your HTML with this (Bootstrap 5):
<div class="row gy-3 position-absolute top-50 start-50 translate-middle w-100">
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='dothraki.html';"> Dothraki</button>
</div>
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='valyrian.html';">Valyrian</button>
</div>
<div class="col-12 col-sm-12 col-md-4 text-center">
<button onClick="window.location.href='sindarin.html';">Sindarin</button>
</div>
</div>
And then replace your button CSS with this (removing the button positioning):
button {
font-family: 'Almendra SC', serif;
transition: 0.5s;
padding: 15px 60px;
text-decoration: none;
font-size: 2vw;
border-radius: 5px;
border: 1px;
transition: all 0.2s ease-in-out;
color: rgba(255, 255, 255, 0.8);
background: #146C94;
}
Also, I recommend you replace your buttons with [Anchor tags][1] if they are only going to take the user to a page.
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论