Question

我正在使用bootstrap的响应性，我遇到了一个小问题，通常我会有超过2个图像要显示，但截至目前我只有2个图像，我想将它们放在这个中心暂时的页面链接，让他们也有回应。

http://dagrafixdesigns.com/2019/industrial-darker/graphics.html

点击RAFTERS TAB

我知道我可以使用边距或填充来做到这一点，但我也不想制作媒体css以使其在设备上看起来正确等。

是否可以轻松添加元素以实现此目的？似乎text-align inline html什么也没做，也没有做中心标记。

谢谢迪安

CODE SNIP目前的情况

<div class="row project-listing">
<div class="col-md-4 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/Hang/PG_ZOOM.png" class="image-link" title="Project Light Box Gallery Title"> <img src="images/Hang/PG_ZOOM.png" alt="" class="img-responsive"> </a> 
    </div>
    <!--Pro thumb start--> 
</div>
<!--Project block start-->
<div class="col-md-4 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/Hang/AB_ZOOM.png" class="image-link" title="Project Light Box Gallery Title 2"><img src="images/Hang/AB_ZOOM.png" alt="" class="img-responsive"></a> 
    </div>
    <!--Pro thumb start--> 
</div>
<div class="hiderafters">
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 3"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
<div class="col-md-3 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 4"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
    </div>
    <!--Pro thumb start--> 
</div>
<div class="col-md-3 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 5"> <img src="images/thumb.jpg" alt="" class="img-responsive"> </a> 
    </div>
    <!--Pro thumb start--> 
    </div>
    <!--Project block start-->
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
           <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 6"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 7"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 8"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
    </div>
    <!--Pro thumb start--> 
</div>
</div>

Answer 1

使用flexbox

.project-listing {
  display: flex;
  justify-content: middle;
  align-items: flex-start;
  flex-wrap: wrap;
}

删除row和col- * bootstrap类。

这是开始使用flexbox的一个很好的资源：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

＆＃13;

.project-listing{
  margin:0 auto;
  display:flex;
  border:thin red solid;
}

.img_div{
  margin:auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row project-listing">
<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

＆＃13;

这与您正在寻找的相同吗？

这是JSFiddle

希望这有帮助。

Answer 3

我只更改了img对椽子的响应，通过向元素添加1然后我用这段代码设置它。

.project-listing1 {
  display: flex;margin:0 auto;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

很抱歉，获奖积分因为有人觉得我不够努力，我可以向你保证，我来这里的时间是3小时。的 SAD 再次感谢

如何在bootstrap

3 个答案: