Twitter的引导：在小分辨率放置元素并排？(Twitter Bootstrap: Place e

2019-10-20 17:41发布

站内文章 / 移动开发
31 0 0

我试图让我的设计响应。 我获得了成功，但迄今为止我有对齐的一些问题。 就像你在下面的图片中看到，设计是向左。 红色框的页面（后来绘制）的实际中心：

这不应该发生，因为我已经封闭的容器类里面的股利。 为什么它仍然发生？ 我想无论是标题和缩略图始终处于页面的完美中心。

还有另外一个问题，这是稍有不同。 裁员的浏览器，即使浏览器有空间来容纳并排2缩略图的一面，它仍然只显示一个。

这看起来非常奇怪，我想以适应2个缩略图就可以无杂波容纳他们。 我加入了COL-SM-6级，但仍没有表现非常不同。 我不能添加COL-XS-6，因为在非常小的设备，我不想被人看到只有1缩略图。

因此，我认为我们将不得不为此编写媒体查询？ 应该做什么？

在HTML / CSS文件是在这里和网站托管在这里 。

落实@The印度程序员建议的修改：

  1. 嘿，这工作（有问题）！ 为什么使其为200px扭曲居中对齐？ 制作宽度：100％的汽车是导致我的悬停状态的动画图像外溢出。 我们如何应对呢？

  1. 没有！ 我不希望它是COL-XS-6。 也就是说，我不希望在小规模设备2个缩略图。 这是它的外观：

所以，这是我做了什么： 

<div class="col-md-3 col-sm-6 col-xs-12">
   <div class="thumbnail">
        <img src="images/Layer26.png" alt="" class="img-responsive">
        <div class="caption">
        <!-- Start Caption -->
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div>
        </div>
        <!-- End Caption -->                  
   </div>
   <h5 class="text-center">Artist Name 2, city</h5>
</div>

然而，这并不浪费空间：

有没有在其中，即使在小规模的尺寸，该网站显示的缩略图2直到杂波的方法吗？

该网站托管在同一地点等都是HTML和CSS文件 。

Answer 1:

你应该张贴你的相关代码的问题，并作出小提琴或JSBin。 对于你正在寻找做什么，因为你必须对超驰的风格，我不会使用缩略图类。 您需要在图像周围的包装和说明，使悬停处理知道在哪里把自己定位。 我还加了网格480像素到767px。 我发现它更好地使用较大的图像，这样，当它尺寸下降，但仍充满包装的宽度，除非你在图像上使用100％（未最小宽度）。

DEMO： http://jsbin.com/xujum/2/

HTML（需要.container> .row图案）： 

<div class="col-sm-6 col-md-3 col-ms-6 text-center hover-me">
        <div class="inner">
<img src="http://lorempixel.com/g/400/400/" alt="" class="center-block">          
        <div class="caption">
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div></div>
        <!-- End Caption -->                  
   </div>
   <h5>Artist Name 2, city</h5>

</div>  <!-- /col-* -->

CSS 

.hover-me {
    margin-bottom: 20px
}

.hover-me .inner {
    position: relative;
    overflow: hidden;
}

.hover-me .inner:before {
    content: " ";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
}

.hover-me:hover .inner:before {
    top: 0;
    background: rgba(18,129,140,.50);
}

.hover-me .caption {
    position: absolute;
    width: 100%;
    top: -100px;
}

.hover-me:hover .caption {
    top: 50%;
    margin-top: -20px;
    transition: all .5s ease-in-out;
}

.hover-me img {
    max-width: 100%;
    display: block;
}

@media (min-width:1200px) { 
    .container {
        border: 1px solid red
    }

    .hover-me img {
        max-width: 200px;
        height: auto;
    }

    .hover-me .inner {
        max-width: 200px;
        margin: 0 auto;
    }
}

/*------------------------------------------------------------------------------------------------------------------------------------
  bootstrap columns for 480px - 767px == col-ms-* // there are no responsive utilities for this
-------------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 480px) and (max-width: 767px) { 
    .col-ms-1,
    .col-ms-2,
    .col-ms-3,
    .col-ms-4,
    .col-ms-5,
    .col-ms-6,
    .col-ms-7,
    .col-ms-8,
    .col-ms-9,
    .col-ms-10,
    .col-ms-11,
    .col-ms-12 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 2%;
        padding-right: 2%;
    }

    .col-ms-12 {
        width: 100%
    }

    .col-ms-11 {
        width: 91.66666666666666%
    }

    .col-ms-10 {
        width: 83.33333333333334%
    }

    .col-ms-9 {
        width: 75%
    }

    .col-ms-8 {
        width: 66.66666666666666%
    }

    .col-ms-7 {
        width: 58.333333333333336%
    }

    .col-ms-6 {
        width: 50%
    }

    .col-ms-5 {
        width: 41.66666666666667%
    }

    .col-ms-4 {
        width: 33.33333333333333%
    }

    .col-ms-3 {
        width: 25%
    }

    .col-ms-2 {
        width: 16.666666666666664%
    }

    .col-ms-1 {
        width: 8.333333333333332%
    }

    .col-ms-pull-12 {
        right: 100%
    }

    .col-ms-pull-11 {
        right: 91.66666666666666%
    }

    .col-ms-pull-10 {
        right: 83.33333333333334%
    }

    .col-ms-pull-9 {
        right: 75%
    }

    .col-ms-pull-8 {
        right: 66.66666666666666%
    }

    .col-ms-pull-7 {
        right: 58.333333333333336%
    }

    .col-ms-pull-6 {
        right: 50%
    }

    .col-ms-pull-5 {
        right: 41.66666666666667%
    }

    .col-ms-pull-4 {
        right: 33.33333333333333%
    }

    .col-ms-pull-3 {
        right: 25%
    }

    .col-ms-pull-2 {
        right: 16.666666666666664%
    }

    .col-ms-pull-1 {
        right: 8.333333333333332%
    }

    .col-ms-pull-0 {
        right: 0%
    }

    .col-ms-push-12 {
        left: 100%
    }

    .col-ms-push-11 {
        left: 91.66666666666666%
    }

    .col-ms-push-10 {
        left: 83.33333333333334%
    }

    .col-ms-push-9 {
        left: 75%
    }

    .col-ms-push-8 {
        left: 66.66666666666666%
    }

    .col-ms-push-7 {
        left: 58.333333333333336%
    }

    .col-ms-push-6 {
        left: 50%
    }

    .col-ms-push-5 {
        left: 41.66666666666667%
    }

    .col-ms-push-4 {
        left: 33.33333333333333%
    }

    .col-ms-push-3 {
        left: 25%
    }

    .col-ms-push-2 {
        left: 16.666666666666664%
    }

    .col-ms-push-1 {
        left: 8.333333333333332%
    }

    .col-ms-push-0 {
        left: 0%
    }

    .col-ms-offset-12 {
        margin-left: 100%
    }

    .col-ms-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-ms-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-ms-offset-9 {
        margin-left: 75%
    }

    .col-ms-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-ms-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-ms-offset-6 {
        margin-left: 50%
    }

    .col-ms-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-ms-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-ms-offset-3 {
        margin-left: 25%
    }

    .col-ms-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-ms-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-ms-offset-0 {
        margin-left: 0%
    }
}


Answer 2:

设置您的略图类的宽度为100％，而不是200像素。 如果您想为其他分辨率的宽度，则可以考虑使用最小宽度 

.thumbnail{
    position:relative;
    height:200px;
    width:auto;
}

原因问题2：引导设置为移动首先因为你只使用COL-MD-3 COL-SM-6，它考虑COL-XS-12当浏览器的宽度低于768px。 

<div class="col-md-3 col-sm-6 col-xs-6">
   <div class="thumbnail">
        <img src="images/Layer26.png" alt="" class="img-responsive">
        <div class="caption">
        <!-- Start Caption -->
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div>
        </div>
        <!-- End Caption -->                  
   </div>
   <h5 class="text-center">Artist Name 2, city</h5>
</div>


文章来源: Twitter Bootstrap: Place elements side by side in small resolution?
标签： html css twitter-bootstrap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~