如何将字形右侧的文本设置为 Twitter BootStrap 主题？

Question

我是 Twitter 的新手 BootStrap，我遇到以下问题：

我已将此部分定义到我的页面中：

    <!-- Column 3:  -->
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <i class="glyphicon glyphicon-home"></i>
              <h4><a href="#">TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

所以我希望显示 BootStrap glyphicon 的 i 标签在左侧，而 thext ( TEST 和 Bla Bla Bla) 在右边。

所以我正在尝试设置以下 CSS:

.groups i {
    float: left;
    margin-right: 15px;
    width: 80px;
}

但是它不起作用，我发现文字在字形下方。

为什么？我错过了什么？我该如何解决这个问题？

Tnx

Answer 1

只需将 float:left 应用于图形图标即可实现此目的

你没有遗漏任何东西，但问题是 .glyphicon in bootstrap 使用 inline-block你可以通过给定的 js fiddle

来理解这个东西

Understanding 参考js fiddle

.groups i {
    float: left;
    margin-right: 15px;
    width: 80px;
}
.test{
    float:left;
}

   <!-- Column 3:  -->
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <i class="glyphicon glyphicon-home test"></i>
              <h4><a href="#">TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

这里是演示

DEMO

Answer 2

最明显的解决方案是将字形移动到 link。

.group-item i {
  margin-right: .5em; /* margin to tast */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <h4><a href="#"><i class="glyphicon glyphicon-home"></i>TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

这具有使图标可点击的额外好处。

或者，让图标浮动

.group-item i {
  float: left;
  margin-right: .5em;
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="group-item">
      <i class="glyphicon glyphicon-home"></i>
      <h4><a href="#">TEST</a></h4>
      <p>Bla Bla Bla</p>
    </div>
  </div>

如何将字形右侧的文本设置为 Twitter BootStrap 主题？

How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

html

css

twitter-bootstrap

glyphicons