Bootstrap中的照片网格没有边距

时间:2016-01-05 19:13:05

标签: html css html5 twitter-bootstrap

我试图在没有像这样的边缘的Bootstrap中实现照片网格,而且这也必须是全宽的,我解决了这个问题,将所有内容放入容器流体和无槽中。 pic

但我不知道我错在哪里。最大的问题实际上是更大的照片,我需要对齐它,没有任何边框或边距,我试图创建,就像你可以看到 DEMO,另一个col-lg-6来获得这个尺寸,其他照片是col-lg-3。不知道问题是什么

3 个答案:

答案 0 :(得分:2)

希望它能帮到你

.img-responsive {
display: block;
max-width: 100%;
height: auto;
width: 100%;
}
.portfolio-box {
position: relative;
display: block;
margin: 0 auto;
max-width: 100%;
}

Demo

答案 1 :(得分:1)

这可能会有所帮助。首先,我将左侧组合框与我可用于特异性的类别分类。然后我将其添加到CSS

 .portfolio-box.left-side{
   height: 480px;
   overflow: hidden;
 }
 .left-side > img{
    width:100% !important;
 }

这是HTML的附加类

<a href="#" class="portfolio-box left-side">

以下是DEMO

的链接

答案 2 :(得分:1)

我会将一个等于你的装订线宽度的负边距应用到网格列的子节点和匹配的填充:

.gallery-image {
  margin: -15px;
  padding: 15px 0;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <div class="gallery-image">
        <div class="embed-responsive embed-responsive-4by3">

<强> Demo