标签: responsive-design

我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完整响应式导航栏,其中品牌可以包含图像(徽标)或文本.

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS:

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

问题是,在浏览器的窗口大小减小并且菜单折叠后,导航栏将返回其原始高度,徽标图像如下所示:

另一个问题是更改<img src="http://placehold.it/150x50&text=Logo" alt="">为<h3>AppName</h3>使AppName不在中间:

目前它通过设置填充值来居中,但我不知道如何让它独立于它.

有谁能帮我解决这个问题？

问候

编辑:

以下是我想要实现的效果的准备图像: …

我正在使用该.resize()函数来检测窗口重新调整大小事件,但这会检测高度和宽度的变化.

有没有办法检测宽度变化而不是高度变化？

我有一个列出项目的网页.默认模板使用一个表,我觉得非常合适.但是,在此表中,有一列包含比其他列更多的文本:

虽然这在大屏幕上运行,但在小屏幕上阅读非常烦人:

为了更好地使用可用空间,我只能想到使用div的假表格布局.我做了一个原型,使用自举网格布局,在大屏幕上看起来像一个表行,但在小屏幕和超小屏幕上有不同的布局:

虽然这通过使用全宽度来提高文本的可读性,但我不能再使用我已经获得的用于桌面的实用程序,并且它以微妙的方式打破了用户体验.例如,我使用一个很好的脚本,可以在客户端进行排序.但这只适用于真实的桌子.(此外,真实表和假表之间存在小的不一致和视觉差异)

有什么方法可以将表格行重新格式化为类似于上一张图像中的多行容器吗？

仅供参考:我在服务器上使用jquery 2.1.1,Bootstrap 3.2.0.1作为GUI Framework和asp.net MVC.

Bootply在这里:http://www.bootply.com/pRehwTai4G

编辑:如果不够清楚:我想保留<tr>和<td>标签,但他们的样式类似于div.我不想用div替换表.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.sized {
  height: 100%;
  position: relative;
  background: #eee;
  overflow:hidden;
  padding:0;
}
.sized iframe {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 320px) {
  height: 200%;
  top: -50%;
}
@media (min-width: 640px) {
  height: 180%;
  top: -40%;
}

<div class="sized">
  <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

当我在片段结果中得到一个cookie相同的原始错误时,这里是一个镜像:

https://jsfiddle.net/07Lffw5x/2/embedded/result/

[编辑]也许这是一个更好的演示,如果你比较这个,没有太大的区别......为什么？[/编辑]

我正在尝试为iframe重现背景大小的封面.

事情是它似乎重新缩放视频,仅适用于更大的尺寸,

题,

重新划分可以在每个断点生效吗？或者vimeo玩家可能会自己重新缩放？

我正在创建一个响应式网站,并且刚刚注意到在iPhone上查看时我的内容页面中出现了一种奇怪的行为.在纵向模式下加载时,以及旋转到横向时,它可以正确缩放.然而,当旋转回到肖像时,页面似乎向左移动,或者没有正确缩放,并且在右侧有一条白色空间.当用户可以向左滑动页面时,这个空白区域似乎也在第一次加载时出现

这不是使解释进一步复杂化,而是指向发生此行为的示例页面的链接.看看iPhone,然后看一下没有这个问题的主页.

如果你需要进一步了解,请知道:)

根据响应式网页设计的原则,Skeleton可以扩展以适应移动浏览器.Bootstrap提供相同的功能吗？

是否有使用Emacs的组织模式发布的漂亮网站？我按照在线教程,但生成的网站太难看了.是否有任何现有的美丽组织模板(有很好的CSS表)？

因此,我试图尽可能大地显示图像,而不会在任何屏幕尺寸上进行裁剪.这意味着,height: 100%; width: auto在landscape和width: 100%; height: auto中portrait.

我正在提供足够大的图像来填充视网膜iPad,所以几乎每个屏幕尺寸都会缩小图像.除了Internet Explorer和Firefox在横向模式下,它在每个浏览器和方向上都能很好地工作,这使得它们对于几乎每个屏幕来说都太大了.这只是在风景中,请注意.

相关的代码位是:

<style type="text/css">

            #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}

            #content {
              text-align: center;
              margin: 0px;
                font-size:0;
                 position: absolute;
                top:0; left: 0; right: 0; bottom: 0
            }

            #content:before {
              content: '';
              display: inline-block;
              height: 100%; 
              vertical-align: middle;
              margin-right: -0.25em; 
             }

            .sponsor {
              display: inline-block;
              vertical-align: middle;
             }

             #content img {
                max-width: 100%;
                width: 100%;
                height:auto;
            } 
@media all and (orientation: …

我从互联网上加载了我网站上的多个图像.是否有可能在响应网格中为所有这些图像提供六边形？

<div>
    <img src="link" class="Image">
</div>

<div>
    <img src="link" class="Image">
</div>
...

我发现了多种方法,但您需要src在CSS代码中填写图像.这对我来说是不可能的,因为网站加载来自互联网的随机图像与jQuery所以我不能使用背景图像.

我试过这个:http://jsfiddle.net/8f5m5wv0/

我正在使用Datatables.net最新版本,带有数据表和引导程序.我想我的问题是:Datatables Responsive Bootstrap用于检测溢出,因为它显然不是父宽度.

这是我的结果:

这是一个非常直接的问题.如果我减少窗口的宽度1个像素,列最终会崩溃.如果我然后展开它,它将返回到此状态.我想防止父引导程序面板溢出.我已经删除了bootstrap网格div(row/col-xs-12等)来消除potitial问题,但是一旦解决了这个问题(或者我更好地理解了这个问题),我打算也使用bootstrap网格系统.

这是一个完美复制问题的plunkr(折叠运行视图):http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR？p = preview

<!DOCTYPE html>

<html>
<head>
    <title>Tables - PixelAdmin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
    <style>
        body {
            font-size: 140%;
        }

        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }
    </style>
</head>

<body style="padding-top: 40px;">

<div class="panel panel-primary" style="margin: 51px; padding: 0;">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body" style="padding: 0;">
        <div style="width: 100%; border: 1px solid red;">
            <table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Name</th> …