responsive-design 相关问题

我想要一个按钮来占据列的整个宽度，但是有困难...... ... 我想要一个按钮占据列的整个宽度，但是有困难...... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> 如何使按钮与列一样宽？ Bootstrap v3 和 v4 在您的按钮/元素上使用btn-block类 Bootstrap v2 在您的按钮/元素上使用input-block-level类为什么不使用 Bootstrap 预定义类 input-block-level 来完成这项工作？ <a href="#" class="btn input-block-level">Full-Width Button</a>  <a href="#" class="btn form-control">Full-Width Button</a>   <a href="#" class="btn input-block-level form-control">Full-Width Button</a> 在Control Sizing^部分了解更多信息。 Bootstrap / CSS 使用col-12、btn-block、w-100、form-control或width:100% <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button> 如果有些人注意到 btn-block 在 bootstrap 5.1+ 中不再工作：它在 bootstrap 5.1 中被删除（changelog）： Breaking Dropped .btn-block 实用程序。而不是使用 .btn-block 在 .btn 上，用 .d-grid 和 .gap-* 实用程序包裹你的按钮根据需要将它们隔开。切换到响应式课程以获得更多控制他们。阅读文档以获取一些示例。您现在可以通过添加类 w-100 使按钮全宽，正如作者在其官方定价示例页面中所做的那样： <button type="button" class="w-100 btn btn-lg btn-outline-primary"> Sign up for free </button> 来源：https://getbootstrap.com/docs/5.1/examples/pricing/ 如果你想做一堆块按钮，官方文档推荐如下： <div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div> 来源：https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons 我只是用这个： <div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" class="btn btn-primary btn-block">Sign In</button> </div> 使用 <div class="btn-group btn-group-justified"> ... </div> 但它只适用于元素而不适用于元素。参见：http://getbootstrap.com/components/#btn-groups-justified 你应该将这些样式添加到 CSS 表中 div .no-padding { padding:0; } button .full-width{ width:100%; //display:block; //only if you're having issues } 然后更改将类添加到您的代码中 <div class="span9 btn-block no-padding"> <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button> </div> 我还没有测试过这个，我不是 100% 确定你想要什么，但我认为这会让你接近。在 Bootstrap 5 中，btn-block 类不再起作用。但是，您可以将类 w-100 添加到按钮，使其与其容器一样宽。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"><div class=" col-5 "> <a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a> </div><div class="col-5 "> <a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a> </div></div> 我原以为这将是最像自举式的做事方式： <button type='button' class='btn btn-success col-xs-12'> First buttton baby </button> 我所做的就是将类col-xs-12添加到按钮。 <div class="col-md-9"> <button class="btn btn-block btn-primary" type="button">Block level button</button> </div> 在 Bootstrap 3 中，这应该是你所需要的。我相信btn-large压倒了btn-block的宽度。 2022 年更新：您有多种方法可以使按钮全宽。您可以将w-100添加到班级中。您可以将d-grid和gap-2添加到按钮上方的容器中： <div class="d-grid gap-2">  <button class="btn btn-primary" type="button">Button</button> </div> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button> 我们可以使用块级全宽按钮通过添加 .btn-block 创建块级按钮——那些跨越父级的整个宽度的按钮。 <button type="button" class="btn btn-primary btn-lg btn-block"> Block level button </button> <button type="button" class="btn btn-secondary btn-lg btn-block"> Block level button </button> 您可以简单地使用 css 属性width: 100%： <button style="width: 100%;">Test Button</button>

css twitter-bootstrap html responsive-design

回答 14 投票 0

如何使flexbox响应？

我有一个div，有两个我希望水平堆叠的元素。 Div＃C具有固定宽度，div＃B将填充其余空间。然而div＃B的内容可能是固定宽度（这是...

html css css3 responsive-design flexbox

回答 3 投票 1

低于600px的响应式设计会导致导航栏出现问题？

我目前正在为我当前的项目创建媒体查询，我目前面临的问题是导致我的导航栏在宽度为600px时没有响应。发生的事情是......

html css responsive-design responsive

回答 1 投票 0

如何在Google地图上隐藏div并将其保持全屏？

我想在谷歌地图上放置一个div，即使地图是全屏的。当它不是全屏时我已经可以将div放在地图前面，但我需要的是div是......