css - Bootstrap 按钮不显示与容器元素内联

Question

我正在使用 Bootstrap CSS 为网站创建一个简单的横幅，在将横幅中的文本居中后，我想要一个与其内联显示的按钮。但是，在我创建按钮后，它不会与按钮内的居中文本内联显示。

HTML:

<div id="idea_banner">  
    <div class="container">
        <b>Got an idea? Tell us about it!</b>
        <a href="#" class="btn btn-success btn-large">Give us an idea</a>

    </div>  
</div>

CSS:

#idea_banner {
  background: #4B91FB;
  overflow:hidden;
  width:100%;
  height:90px;
}

.container {
  position:relative;
}

.container b {
  display:block;
  text-align:center;
  margin-right:100px;
  margin-top:35px;
  color:#FFF;
  font-size:22px;
  white-space:nowrap;
}

.container a {
  display:inline-block;
  float:left;
}  

我不确定这是否是 Bootstrap 问题。非常感谢任何帮助!

Answer 1

之所以发生，是因为您显示了 b作为block在你的 CSS 中。将其更改为 inline把它放在一行中。

此外，删除 float: left对于 .container a并添加 text-align: center对于 .container .

顺便说一下，<b>不推荐使用标签。如果您需要一个元素来包装文本，请使用 <p>相反。

工作代码片段:

#idea_banner {
  background: #4B91FB;
  overflow:hidden;
  width:100%;
  height:90px;
}

.container {
  position:relative;
    text-align: center;
}

.container b {
  display: inline;
  text-align:center;
  margin-right:10px;
  margin-top:35px;
  color:#FFF;
  font-size:22px;
  white-space:nowrap;
}

.container a {
  display:inline;
  /*float:left;*/
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


<div id="idea_banner">  
    <div class="container">
        <b>Got an idea? Tell us about it!</b>
        <a href="#" class="btn btn-success btn-large">Give us an idea</a>

    </div>  
</div>