如何在覆盖最大高度的Bootstrap面板中调整文本的位置？

Question

我似乎无法弄清楚如何在我调整了最大高度的面板体内移动文本。下面是我的HTML的代码片段以及我所做的覆盖。

HTML：

SELECT TO_CHAR(TO_TIMESTAMP('2000-03-28 8:00:00', 'YYYY-MM-DD HH24:MI:SS'), 'YYYY-MM-DD HH:MI:SS') 
FROM Dual;

CSS：

    <div class="row chatListRow">
        <div class="panel panel-default">
            <div class="panel-body userBox">
                <small>User 1</small>
            </div>
        </div>
    </div>

这就是它的样子：

我想要做的是调整文本的位置，比如将它移到顶部稍微一点，这样文本仍然看起来垂直居中。我不知道如何调整小标签内文本的位置。感谢任何愿意帮助我的人。

所以我做的是调整userBox的填充。

.chatListRow{
  margin-bottom: -1.5em;
  margin-top: -1em;
}

.userBox{
  max-height:1.5em;
}

这就是它现在的样子：

感谢Joseph Marikle帮助我！

Answer 1

嗯......这更像是你在一个元素上设置一个高度，强制填充也用高度来计算。 1.5em包含默认填充。您可以通过将box-sizing设置为content-box来解决此问题。默认情况下，所有元素都在twitter引导程序中设置为border-box（它是latesrally * { box-sizing: border-box; }，其中引用了供应商前缀）。所以，只需将content-box设置为.userBox。

/* CSS used here will be applied after bootstrap.css */
body {
  padding: 3em;
}

.chatListRow{
  margin-bottom: -1.5em;
  margin-top: -1em;
}

.userBox{
  max-height:1.5em;
  box-sizing: content-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
  <div class="row chatListRow">
    <div class="panel panel-default">
      <div class="panel-body userBox">
        <small>User 1</small>
      </div>
    </div>
  </div>
</div>