为什么bootstrap按钮如此宽？

Question

我有一个jumbotron类，它必须包含一个按钮，但它奇怪地扩展了，那个按钮看起来很难看。为什么会这样？

HTML

<div class="container">

  <div class="jumbotron">
    <div class="row">    
      <div class="col-md-8">

        <button class="btn btn-primary btn-sm">

          <span class="glyphicon glyphicon-ok">
            Why is this button so wide?
          </span>

        </button>

      </div>
    </div>
  </div>

</div>

CSS

.jumbotron {
    margin: 10px;
}

.row {
    margin: 8px 0;
}

如果我尝试缩小列的大小，例如 col-md-4 ，则不会发生任何变化。

Answer 1

您的错误是您在图标span内写了文字。这是固定代码

＆＃13;

＆＃13;

.jumbotron {
    margin: 10px;
}

.row {
    margin: 8px 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="jumbotron">
    <div class="row">    
      <div class="col-md-8">

        <button class="btn btn-primary btn-sm">
          <span class="glyphicon glyphicon-ok"></span>
          Why is this button so wide?
        </button>

      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

主页中的

使用此...

<header>
    <div class="container">
        <div class="intro-text">
            <div class="intro-lead-in">Welcome!!!</div>
            <div class="intro-heading">Let's Get Started</div>
            <a href="#" class="page-scroll btn btn-xl">Tell Me More</a>
        </div>
    </div>
</header>

在css中 使用这个

.btn-xl {
padding: 20px 40px;
border-color: #fed136;
border-radius: 3px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background-color: #fed136;

}

这将解决您的问题