Bootstrap 按钮大小和对齐方式

Question

这是我目前所拥有的 http://www.bootply.com/SDIQQr0dZJ 或 https://jsfiddle.net/sjgz57b8/

<div class="panel panel-default">
 <div class="panel-heading">
           <strong>myusername</strong>
    <div class="btn-group btn-group-sm pull-right">
       <button type="button" class="btn btn-danger">Dislike</button>
       <button type="button" class="btn btn-success">Like</button>
    </div>
 </div>
     <div class="panel-body">
              Panel content
     </div>
 </div>                       

我正在尝试使按钮适合该空间并垂直居中，但我已经添加了 btn-group-sm 类，所以我不确定我还能做什么。我还试图使不喜欢按钮的宽度与喜欢按钮的宽度相同。感谢您的帮助

Answer 1

您错过了包含<div class="row"> 和<div class="col-lg-*">。干得好。我已经提供了演示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="row">
      <div class="col-lg-12">
        <strong>Myusername</strong>
        <div class="btn-group btn-group-sm pull-right">
          <button type="button" class="btn btn-danger">Dislike</button>
          <button type="button" class="btn btn-success">Like</button>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

为了正确对齐按钮'

添加到 .panel-heading

 .panel-heading{
   display:table;
   width:100%;
 }

使两个按钮的宽度相同

按钮被设计成显示内联块，这意味着“不喜欢”这个词比“喜欢”这个词有更大的长度。您可以设置按钮的两个宽度。我建议为每个按钮添加一个名为“button”的类并设置宽度以避免其他元素受到影响

 .button{
   width:50px;
 }

#logo .short {
  position: relative;
  margin-top: 0;
  padding: 0 10px;
  font-size: 36px;
  display: inline-block;
  text-transform: uppercase;
  transition: all .3s ease-out;
  border: solid black;
}

.short:after {
  position: relative;
  margin-left: -20px;
  content: "est1";
  opacity: 0;
  -webkit-transition: all .3s ease-out;
}

.short:hover:after {
  opacity: 1;
  display: inline-block;
  margin-left: -10px;
}

#logo span {
  position: relative;
  transition: margin .3s ease-out;
}

span:hover {
  margin-left: 20px;
}

span:after {
  position: relative;
  margin-left: -20px;
  content: "est2";
  opacity: 0;
  -webkit-transition: all .3s ease-out;
}

span:hover:after {
  opacity: 1;
  margin-left: 0px;
}

.panel-heading {
  display: table;
  width: 100%;
}

.button {
  width: 50px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <strong>myusername</strong>
    <div class="btn-group btn-group-sm pull-right">
      <button type="button" class="btn btn-danger button">Dislike</button>
      <button type="button" class="btn btn-success button">Like</button>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Answer 3

只需添加您的自定义 CSS。通过添加额外的padding，您可以制作相同宽度的按钮。如果添加negative margin-top，按钮将垂直对齐。

工作sn-p

#like {
  padding-left:16px;
  padding-right:16px;
}
#btn-vc
{
  margin-top: -5px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
      <div class="panel-heading">
          <strong>myusername</strong>
        <div id="btn-vc" class="btn-group btn-group-sm pull-right">
                 <button type="button" class="btn btn-danger">Dislike</button>
                 <button id="like" type="button" class="btn btn-success">Like</button>
          </div>
      </div>
      <div class="panel-body">
         Panel content
      </div>
</div>

希望这会有所帮助！