gpt4 book ai didi

html - 如何防止按钮堆叠?

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

在我下面的代码中,这是一个令人难以置信的早期草稿,我基本上是在尝试为一些事情定位。我得到了一般流程减去最后两部分,但我遇到了一个问题。

由于 Bootstrap ,一切都是响应式的,但是当浏览器变得足够小时,按钮将会堆叠。如果您转到“google.com”,页面不会堆叠,我认为它看起来更好(但它仍会适应浏览器窗口大小)。

我怎样才能修改我的代码来做同样的事情,或者至少在浏览器窗口很小的时候看起来不像一团糟?对此还有什么想法吗?我本质上不是设计师,所以也许页面在某个点后被切断可能不是正确的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Noted!</title>
</head>
<body>

<section class='container-fluid'>
<div class='row-fluid'>
<div class='col-md-4'>
<h1>logo</h1>
</div>
<div class='col-md-4 col-md-offset-4'>
<button>login</button>
</div>
</div>
</section>

<section class='container'>
<div class='text-center'>
<h1>motto here</h1>
</div>
<div class='row' class='text-center'>
<div class='col-md-3 col-md-offset-3'>
<button>facebook button</button>
</div>
<div class='col-md-3'>
<button>twitter button</button>
</div>
</div>
</section>

<section class='container'>
<h1>about us and icons</h1>
</section>

<section class='container-fluid'>
<h1>footer mate</h1>
</section>


</body>

<!-- don't forget to link the angular file -->
</html>

最佳答案

如果您不想在小型设备上堆叠东西,请使用col-xs-* 类而不是col-md-* 类。参见 http://getbootstrap.com/css/#grid-options用于所有不同的页面大小和类别。

请注意,Bootstrap 不关心您使用的是什么类型的计算机,类只应用屏幕宽度。参见 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width有关 Bootstrap 正在执行的宽度查询的更多信息。

关于html - 如何防止按钮堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31438494/

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