Questions tagged «responsive-design»

我想创建一个固定的边栏，该边栏位于居中的Bootstrap网格之外。尝试执行此操作时，我面临的挑战是确定要向我应用/覆盖的其他样式，.container以便在调整屏幕大小时不会与侧边栏重叠。 对于初学者，我仅使用css框架的网格部分，因此和是从文件本身提取的代码.container，.row并且不是自定义的。还要记住，我正在使用Bootstrap 3，因此，请不要提出以前线程中经常问到的Bootstrap 2流体网格解决方案的建议。.col-md-12bootstrap.css 的HTML <div id="left-nav"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <p>Lorem ipsum dolor sit amet, nunc dictum at.</p> </div> </div> </div> 的CSS html, body { height: 100%; width: 100%; } #left-nav { background: #2b2b2b; position: absolute; top: 0px; left: 0px; height: 100%; width: 250px; }

69 html  css  twitter-bootstrap  responsive-design 

我已经在twitterBootstrap基本响应式设计站点中实现了GoogleMapsV3地图。 但是我的问题很简单：我有： <div id="map"></map> 和 #map{ width: 100%; height: 200px } 我希望能够将高度更改为外形尺寸。就像在“我的梦想中的CSS”中一样 #map { width: 100%; height: width * 1.72 } 我尝试过放弃高度，设置为自动以及各种方式-但只是让div总是让我崩溃。 我写一个js解决方案没问题，但是希望有一个简单的CSS简洁解决方案，可能是CSS3 如果不可能的话，什么是让我摆脱困境的最佳方式呢？（计时器，事件等）

69 html  css  responsive-design 

通过将Facebook代码粘贴到文本小部件中，我在侧边栏中使用了类似Facebook的框代码。我的主题是响应式的，我希望获得一个喜欢的框来正确调整其大小。我找到了本教程，但是他说他做的方式并不“完全响应”，所以我不知道是否有更好的方法来做。

67 css  widget  responsive-design 

这赏金已经结束。这个问题的答案有资格获得+500声望奖励。赏金宽限期在23小时内结束。 Ferit希望引起更多关于这个问题的注意。 如何在不假定宽高比的情况下使iframe响应？例如，内容可以具有任何宽度或高度，在渲染之前是未知的。 注意，您可以使用Javascript。 例： <div id="iframe-container"> <iframe/> </div> 调整大小iframe-container以使其内容几乎不能容纳在里面而没有多余的空间，换句话说，有足够的空间容纳内容，因此无需滚动即可显示内容，但没有多余的空间。容器完美地包裹了iframe。 假设内容的纵横比为16：9，这说明了如何使iframe响应。但是在这个问题上，纵横比是可变的。

14 javascript  html  css  iframe  responsive-design 

我在尝试使侧边栏/导航内容（使用Bootstrap）在桌面上默认显示（展开）并在移动设备上默认关闭并且仅在移动设备上显示图标时遇到了一些实际麻烦。我似乎无法使它正常工作。 <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a href="#">Events</a> <a href="#">Speaking</a> <a href="#">Music</a> </ul> <ul id="social-icons"> …

9 javascript  html  css  bootstrap-4  responsive-design