Question

我有一个带“row”类的bootstrap div，里面有2个div作为列，A和B.

A包含带图标的跨度。 B包含一个高度可变的面板，即使在加载后，用户也可以添加东西，它的高度仍然可以增长或变小。

我需要垂直居中我的跨度，将面板的高度作为参考。

这是我的代码：

<div class="row">
    <div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-9">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div>

第一部分是现在如何显示，第二部分是我希望它如何显示。如您所见，“内容”可以内联编辑，因此如果面板增长，跨度也需要调整。

enter image description here

非常感谢你！

编辑1 我必须补充说我正在使用IE浏览器。我尝试了第一个建议，这就是结果：

enter image description here

Answer 1

我最终使用了这个：

<div class="row">
    <div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-10 v-align">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div>

其中：

.v-align {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

请注意，两个列都添加了，等于11，而不是12.有关键！我不知道为什么，但是如果我把它留下1和11（总共12个）它就显示为mi编辑图像。

谢谢！

Answer 2

是的，你可以这样做，但是你必须删除一些引导类并添加两个你自己的类，你可以轻松地设置它。这是代码

＆＃13;

.content{
  clear:both;
  display:block;
}
.a{
  display:inlin-block;
  vertical-align:middle;
  width:20%;
}


.b{
  display:inlin-block;
  vertical-align:middle;
  width:80%;
}

＆＃13;

<div class="row">
  <div class="col-lg-12">
    <div class="content">
    <div class="a">
      <span class="icon-clipboard icon-agenda-item"></span>
    </div>
    <div class="b">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div>  
    </div> 
    </div>
    </div> 
</div>

＆＃13;

我希望这会对你有所帮助

此致 Sarbasish

垂直对齐bootstrap行中的span

2 个答案: