Question

我使用带有引导程序的嵌套列有一个棘手的（对我来说）问题。

我想要达到的是一个拥有

的团队画廊

on md，lg - ＆gt; 1行4列，图片和名称在下面。
on sm - ＆gt; 2行，其中2列带有图片，名称位于下方。
on xs - ＆gt; 4列2列，左栏中有图片，右栏中有名称

为了达到这个目的，我使用嵌套列，除了一件重要的事情外，它的效果非常好： - ＆gt;在xs上应该有正确的列，其名称与图像左侧列的高度相同，因为我希望将名称中间垂直于图像。不幸的是，我的所有尝试都没有帮助（显示：table-cell，height：100％等）

我附上了我的实际代码和结果，以使我的问题可视化。

HTML：

<section id="about" class="section about2">
        <div class="container">         
            <div class="row text-center">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"><img class="img-responsive" src="assets/images/team/wimmer_matthaeus.png" alt="Matthäus Wimmer" /></div>
                        <div class="namecell col-lg-12 col-md-12 col-sm-12 col-xs-6"><h4>Matthäus Wimmer</h4></div>
                    </div>
                </div> 
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"><img class="img-responsive" src="assets/images/team/kragl_gerhard.png" alt="Gerhard Kragl" /></div>
                        <div class="namecell col-md-12 col-sm-12 col-xs-6"><h4>Gerhard Kragl</h4></div>
                    </div>
                </div> 
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"><img class="img-responsive" src="assets/images/team/mayr_manuel.png" alt="Manuel Mayr" /></div>
                        <div class="namecell col-lg-12 col-md-12 col-sm-12 col-xs-6"><h4>Manuel Mayr</h4></div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"><img class="img-responsive" src="assets/images/team/anton_riegler.png" alt="Anton Riegler" /></div>
                        <div class="namecell col-lg-12 col-md-12 col-sm-12 col-xs-6"><h4>Anton Riegler</h4></div>
                    </div>
                </div>               
            </div>      
        </div>
    </section>

LESS / CSS：

.about2 {

  .row
  {
    border: 1px solid black;
  }     

  img
  {
   width: 100%;
   margin: auto;
   border:3px solid @color;
   border-radius: 50%;
   background: @color;

     &:hover
     {
       border:3px solid @color;
       border-radius: 50%;
       background: #fff;
       transition: 1s;
     }
   }

  .namecell
  {
    height: 100%;
    border: 1px solid blue; 
  }

  h4
  {
    text-align: left;
  }

}

correct result on md, lg

wrong result on xs

Answer 1

您只能为小型设备提供/* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .namecell > h4 { padding-top: 10px; } }标记的一些顶部填充。媒体查询是添加特定于设备宽度的样式的最佳解决方案。

只需将其添加到现有样式中即可。

{{1}}

我创建了codepen

Answer 2

Hy everbody，

感谢你的想法。

这解决了我的问题：

我必须使用它来设置内部行的样式并且它可以工作：

<div style="display:flex;align-items:center;">

这里链接谁给我的答案： http://howtocenterincss.com/#contentType=div&horizontal=left&vertical=middle&browser.IE=none

bootstrap不同高度的嵌套列

2 个答案: