个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试使用 bootstrap 进行布局，但我无法弄清楚我做错了什么。我将两列 6 和第二列 6 我将 2 列 3 放在里面，但它不起作用。我是 bootstrap 的新手。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-right: solid 1px #ffbfbf;border-left: solid 1px #ffbfbf;">a</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;"><div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
</div>
</div>
</div>
</div>
335
</body>
</html>我想做什么:
我得到的:
最佳答案
您只是缺少基本的 Bootstrap“规则”。来自docs ..
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
在 Bootstrap 4 中，.col- 不放在.row 将垂直堆叠。
https://www.codeply.com/go/GlA3IP7oGU
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
<div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
</div>
</div>
</div>
</div>
Read how Bootstrap nesting works
关于layout - Bootstrap 4.0 网格系统布局不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55361291/
27
4
0
我不确定是否理解好几个 Android /res/layout 文件夹所起的作用。 layout:一般布局 layout-port:必须更改为纵向的小部件布局 layout-land:小部件的布局，必
我在 Qt 4.7 中有一个界面，但我很难按照自己的意愿行事。 所需行为的基本描述:用户在组合框中进行选择，这会导致查询转到另一个函数，该函数返回一个 QHBoxLayout 对象，该对象通常包括多个
我在 res 文件夹中创建了 layout-large、layout-normal 和 layout-xlarge 并且我将所有 xml 文件复制到那些布局文件夹中 首先，我想问一下 layout(d
如图所示。我想在布局上方显示星图。我是这种编码的新手。 我的查询是1)是否可以在我的布局端显示星标(图像)？ 2) 如果每次点击我的 Activity 时我都想显示星标并显示第二张图片，这可能吗？意味
关闭。这个问题需要debugging details .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 上个月关闭。 Improve this questio
我正在使用 android studio 中的 Material 设计为 pre lollipop 设备创建一个 android 应用程序，我是 android studio 的新手我正在我的项目中创
我对 Android 布局设计感到困惑。我想实现下图中的布局: 但是下面的代码产生了类似这张图片的东西: 我的代码
如果我有: Some Element.... Other Element
我有一个单元格(称为A)，它在更高层次的单元格(称为P)中使用一次。当我将 A 放在 P 中时，它的边框比 A 的实际内容大得多。当我下降到 A 并进行缩放时，它被缩小了，表明边缘存在一些东西。 我可
我有一个“auth-redirect”模块，位于所有页面布局文件(1column、2column 等)的开头。这可以确保在渲染任何页面之前，如果用户未经过正确身份验证，则会重定向到登录页面。 我允许呈
我的app只支持landscape模式(这是业务需求)。 我在 layout-land 文件夹中有一个布局 xml 文件，但我没有费心创建一个 layout 文件夹，因为我在 Android list
我正在尝试为我的 Android 应用程序创建启动屏幕，如链接 http://developer.xamarin.com/guides/android/user_interface/creating_
我目前正在开发一个应用程序，我正在使用 swdp为了创建对多个屏幕的支持。 我添加了 sw400dp文件夹，根据 Android Studio 的 XML 渲染器，它基本上包含所有较小的手机。 这意味
Android 在“layout-normal”和“layout”文件夹中处理布局的方式有什么不同吗？如果我有一个被认为布局很小的设备，如果只有这两个选项，它会查看哪个文件夹？ 最佳答案 是的，在您给
我已经看到了在单个页面上创建多个强制布局的解决方案，其中每个布局都包含在其自己的SVG中。但是，我一直无法找到有关如何在单个SVG中包括多个力布局的帮助。每个布局都有自己的数据与之关联。 可以在htt
我听说 Constraint-Layout 中的指南和 RTL 存在一些错误。但是这些方法都没有帮助我。我的BottomNavigation 的两边都有指南，一切都在LTR 中工作，但在RTL 中，其
我有以下渲染函数: render() { return ( Header
我知道如何使用以下文件夹，但例如我不知道 layout-small 和 layout-sw320dp 有什么区别？ 此外，建议我哪些文件夹对优化很重要。我不喜欢我的程序被用户视为不规则。我希望得到您的
layout-latest.js ui-layout-west 面板 west: { paneSelector: ".ui-layout-west"
我是 Android 开发的新手，对我来说，了解图形布局和 xml 如何相互关联的一个好方法是尝试 xml 属性并查看图形 UI 中的变化。有没有一种方法可以同时并排查看，而不必从一个切换到另一个？图
我是一名优秀的程序员,十分优秀！