responsive-design 相关问题

我用引导网格制作了很多按钮，我希望这些按钮在移动视图中位于侧边栏下方。 [桌面视图移动视图](https://i.stack.imgur.com/2K70m.png) 我用引导网格制作了很多按钮，我希望这些按钮在移动视图中位于侧边栏下方。 [桌面视图]() <div class="container"> <div class="row row-cols-xl-4 m-0 "> <div class="col"> <div class="p-2 m-2 bg-primary buttons rounded"> <div id="NotDurumRapor" class="tile"> <div class="tile-body"> <i class="fa fa-bar-chart-o"></i> </div> <div class="tile-object"> <div class="name"> Not Durum </div> <div class="number"> </div> </div> </div> </div> </div> <div class="col"> <div class="p-2 m-2 bg-primary buttons rounded"> <div id="NotDurumRapor" class="tile"> <div class="tile-body"> <i class="fa fa-calendar"></i> </div> <div class="tile-object"> <div class="name"> Ders Programı </div> <div class="number"> </div> </div> </div> </div> </div> 我只分享了 2 个按钮的代码，它对其他按钮重复相同的代码。当我在这个类中包含行类时，我想要的视图是部分形成的，但是在桌面视图中，它在边缘框下面。

.net bootstrap-4 responsive-design bootstrap-grid

回答 0 投票 0

Auto Fit inner div grid to outer column and row height with CSS

我有一个图片库，它包含的 div 溢出了。我尝试了各种解决方案都无济于事。什么 CSS 代码方法将使网格适合固定高度的外部 div，包括制作 ...

css responsive-design wordpress-theming css-grid elementor

回答 2 投票 0

Bootstrap 网格：向“一侧”流动

我正在使用 Bootstrap 的网格系统进行布局。我目前有这样的事情： ... 我正在使用 Bootstrap 的网格系统进行布局。我目前有这样的东西： <div class="container"> <div class="col-xs-8">...</div> <div class="col-xs-4">...</div> </div> 我真正想要实现的是让第二列占据剩余的可用水平空间，即第二列的行为就像在流体容器中一样，但第一列仍然像在固定容器中一样。我尝试使用 :after 伪选择器来引入一个出现在第二列旁边的块（这没关系，因为“whole-width-column”纯粹是为了美观），但我无法得到它占用all空间。如果有人对如何以一种很好的方式实现这一点有任何想法，将不胜感激。编辑：使事情更直观：红色块是我目前拥有的（宽度为 4 的列），绿色块是我想要的。我找到了一个优雅的解决方案。包装容器类用于更改其下容器的行为，而不是全局更改它。另外， margin-right: 0 用于从右侧设置容器流体，您可以使用 margin-left: 0 将其设置为另一侧流体。 N.B：如果容器没有到达屏幕边缘，只需从列中删除填充。 @media (min-width:768px) { .YourWrappingContainerClass .container { width: calc(((100% - 750px) / 2) + 750px) !important; margin-right: 0; } } @media (min-width:992px) { .YourWrappingContainerClass .container { width: calc(((100% - 970px) / 2) + 970px) !important; margin-right: 0; } } @media (min-width:1200px) { .YourWrappingContainerClass .container { width: calc(((100% - 1170px) / 2) + 1170px) !important; margin-right: 0; } } bootstrapcontainercontainer-fluidcss 如果您使用引导程序的 SASS，替代解决方案： // Custom mixin to generate container-fluid-left and container-fluid-right (fluid on the left/right and normal max width on the other) // For each breakpoint, define the maximum width of the container in a media query @mixin make-container-fluid-side-max-widths($side, $max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { margin-#{$side}: 0; padding-#{$side}: 0; .row{ margin-#{$side}: 0; } .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto{ padding-#{$side}: 0; } @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: calc( 100% - (100% - #{$container-max-width}) / 2 ); } } } .container-fluid-left { @include make-container(); @include make-container-fluid-side-max-widths('left'); } .container-fluid-right { @include make-container(); @include make-container-fluid-side-max-widths('right'); } 生成两个类 - container-fluid-left 和 container-fluid-right - 它们在左侧/右侧是流动的，并且只占据与另一个普通容器相同的空间。您需要做的就是将容器的右侧填充设置为 0 并覆盖引导程序放置在其上的最大宽度。 .container { padding-right: 0px; max-width: none; } 演示编辑：您可以尝试的另一种解决方案是： .container { padding-left: 0px; padding-right: 0px; margin-right: 0px; max-width: none; } 新演示演示：http://jsbin.com/titik/1/ HTML <div class="container"> <div class="col-xs-8">Content</div> <div class="col-xs-4"><div class="well">Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here </div></div> </div> CSS body {overflow-x:hidden} .well { z-index: 3; border: 0px; background: red; position: relative; } .well:after { content: ''; position: absolute; top: 0; bottom: 0; left:80%; right:-3000px; background: red; z-index: -1; } 此代码工作屏幕大小限制 1200px 到更大。仅在大于 1200 像素的设备中检查此代码。如果设备尺寸小于 1200px 布局是正常的Demo .main-box { background-color: #ccc; } .col-sm-6 { height: 50px; } .first-col { background-color: #f4b334; } @media only screen and (min-width: 1200px) { .first-col { padding-left: calc((100% - 1160px) / 2); /* 1160px is your container width or web width*/ } } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="container-fluid main-box"> <div class="row"> <div class="col-sm-6 first-col"> <h2>Hello World</h2> <p>this is example text</p> </div> <div class="col-sm-6"> </div> </div> </div> .container { margin: 0 0 0 auto; padding-right: 0; } 这将 0 边距应用到除左侧之外的所有边，左侧设置为自动。然后让第二列与右侧对接，移除填充物。演示我也为同样的事情而苦苦挣扎。我现在制作了一个版本，适用于左侧的 1/3 列和右侧的 2/3 + 全宽列。如果还有时间，我可以根据所有 col-- 选项添加所有选项。我所做的是使用 100vw 并扣除（使用 SASS 变量）固定宽度和其中的一半以添加到左边距，并在右侧添加 0 边距。我再次将列分成 1/3 和 2/3 + 边距： .container-fluid-right { width:calc(100vw - 30px) !important; overflow-x:visible; padding-left:0px; padding-right:0px; > .row > :first-child { padding-left:15px; padding-right:15px; } > .row > :last-child { padding-right:0px; padding-left:0px; float:right; margin-right: 0px; } @include when-sm { > .row > :first-child { width:calc(#{$screen-sm-min} * 1 / 3); margin-left: calc((100vw - #{$screen-sm-min}) / 2); } > .row > :last-child { width:calc((#{$screen-sm-min} * 2 / 3) +((100vw - #{$screen-sm-min}) / 2)); } } @include when-md { > .row > :first-child { width:calc(#{$screen-md-min} * 1 / 3); margin-left: calc((100vw - #{$screen-md-min}) / 2); } > .row > :last-child { width:calc((#{$screen-md-min} * 2 / 3) +((100vw - #{$screen-md-min}) / 2)); } } @include when-lg { > .row > :first-child { width:calc(#{$screen-lg-min} * 1 / 3); margin-left: calc((100vw - #{$screen-lg-min}) / 2); } > .row > :last-child { width:calc((#{$screen-lg-min} * 2 / 3) +((100vw - #{$screen-lg-min}) / 2)); } } } 我使用了来自另一张海报的 when-sm / when-md / when-lg，这些是 mixins： @mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } } @mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } } @mixin when-md() { @media (min-width: $screen-md-min) { @content; } } @mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } } 对于原始海报布局（8 左 4 右），唯一的区别是将 1/3 和 2/3 左右切换我遇到了同样的问题，决定完全跳过 .container 类。我像这样创建了一个名为 .container-only-left 的类 .container-only-left { margin-left: calc(50% - 255px); @media (min-width: 768px) { margin-left: calc(50% - 345px); } @media (min-width: 992px) { margin-left: calc(50% - 465px); } @media (min-width: 1200px) { margin-left: calc(50% - 555px); } } 只要将 .container-only-left 类放在一个覆盖 100vw 的元素中，这对我有用。 Bootstrap 5 的版本，如果你使用的是预编译的 CSS。给 https://stackoverflow.com/a/64542602/1096128 的小费 .container-fluid-right { margin-right: 0; padding-right: 0; .row{ margin-right: 0; > [class*=' col-']:last-child, > [class^='col-']:last-child{ padding-right: 0; } } } @media (min-width: 576px) { .container-fluid-right { max-width: calc( 100% - (100% - 540px) / 2 ); } } @media (min-width: 768px) { .container-fluid-right { max-width: calc( 100% - (100% - 720px) / 2 ); } } @media (min-width: 992px) { .container-fluid-right { max-width: calc( 100% - (100% - 960px) / 2 ); } } @media (min-width: 1200px) { .container-fluid-right { max-width: calc( 100% - (100% - 1200px) / 2 ); } } @media (min-width: 1400px) { .container-fluid-right { max-width: calc( 100% - (100% - 1320px) / 2 ); } } https://codepen.io/sawacrow/pen/Jjmvydx <div class="container-fluid-sticky-right bg-success"><h1>sticky right container</h1></div> <div class="container "><h1>normal container</h1></div> <div class="container-fluid-sticky-left bg-warning"><h1>sticky left container</h1></div> js function containerFluidder() { var container = document.querySelector('.container'); var distanceFromWindow = container.offsetLeft; var containerStyles = window.getComputedStyle(container); var paddingOneSide = parseInt(containerStyles.paddingLeft) distanceFromWindow = distanceFromWindow + paddingOneSide; document.querySelectorAll('.container-fluid-sticky-left').forEach((el) => { el.style.marginRight = distanceFromWindow + 'px'; }); document.querySelectorAll('.container-fluid-sticky-right').forEach((el) => { el.style.marginLeft = distanceFromWindow + 'px'; }); } containerFluidder(); //add event listener to window resize and call containerFluidder window.addEventListener('resize', containerFluidder);

css html twitter-bootstrap responsive-design

回答 10 投票 0

如何将一个视频置于另一个视频的中心

我想要一个背景视频作为我的着陆页的一部分，在该视频的顶部有一个居中的徽标（这是另一个视频）。从本质上讲，当涉及到响应能力时，我想要任何...

css video responsive-design

回答 1 投票 0

已解决：隐藏我的导航栏的 js 在移动设备中造成问题

已解决：我在 js 中遇到了一些问题，我得到了一些代码来在我向下滚动时隐藏顶部栏导航，并在我向上滚动时显示出来，它确实有效。当我添加一些时我遇到了一些麻烦......

javascript css responsive-design navigation

回答 2 投票 0

搜索按钮下方的搜索栏 - 点击

我正在使用 bootstrap 3 为 angular 4 应用程序开发网页。尝试添加一个搜索按钮（右上角/左上角），单击该按钮将在下一行中展开。请参阅右上角的搜索按钮...