带有圆角的矩形框，位于按钮内的文本周围

Question

我想让Sign Up的框更小，理想情况下，在文本和当前状态之间。

。我正在使用bootstrap-3。我试着让btn更小（btn-sm），它接缝就像是问题。但这没有任何作用。 这就是我所拥有的：

.btn {
    font-family: "Lucida Sans Unicode";
    font-size: 18px;
}
#signup {
    border-color: #fff;
}
/*-------------------------------------------------
Navigation bar
-------------------------------------------------*/
.navbar-toggle {
  float: left;
}
.navbar { 
    margin-bottom: 0px;
    font-family: "Lucida Sans Unicode";
    font-size: 18px;
}

<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html">MyWebsite</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">

                <ul class="nav navbar-nav pull-right" >
                <li><a href="#">Log in</a></li>
                  
                  <!-- I'm trying to get the text in the button below within a rectangle box -->
                <li><a href="#" class="btn btn-inverse" id="signup">Sign up</a></li>
                </ul>
            </div>
          </div>
        </nav>

CSS：

Answer 1

按钮和文本之间有填充/边距，您需要查看CSS文件。 bootstrap有两个CSS文件。

在两个CSS文件中查找btn-sm。它将在其中一个内部。但是我发现按钮类也有btn btn-inverse。看看他们。

如果您希望按钮的角落更具草书性，请找到border-radius属性。