使用Bootstrap将同一行上的3个按钮对齐

Question

标题为＆＃34; Action＆＃34;的三个橙色按钮下面，我试图在同一条直线上水平显示它们（均匀分布在整个行上）。我把它们放在＆＃34; btn-group＆＃34;中，我认为它会自动处理。

我是否需要使用col尺寸最多加12？如何在同一条线上均匀分布三个按钮？

＆＃34; btn-group＆＃34;中的三个按钮可以在我的代码底部找到。这是我的代码：

＆＃13;

＆＃13;

<div class="c-form-container section-container section-container-image-bg">
  <div class="container">

    <div class="row">
      <div class="col-sm-8 col-sm-offset-2 c-form section-description wow fadeIn">
        <h1>Happy <strong>Hour</strong></h1>
        <p>If you win, you drink for free, and your friends half off!</p>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 col-sm-offset-3 c-form-box wow fadeInUp">

        <div class="c-form-top">
          <div class="c-form-top-left">
            <h3>Sign Up</h3>
            <p>Fill in the form below to win a happy hour:</p>
          </div>
          <div class="c-form-top-right">
            <div class="c-form-top-right-icon">
              <i class="fa fa-paper-plane"></i>
            </div>
          </div>
        </div>

        <div class="c-form-bottom">
          <form role="form" action="assets/contact.php" method="post">
            <div class="form-group">
              <label for="c-form-name">
                <span class="label-text">Name:</span>
                <span class="contact-error"></span>
              </label>
              <input type="text" name="name" placeholder="First & Last Name" class="c-form-name form-control" id="c-form-name">
            </div>

            <div class="form-group">
              <label for="c-form-birthday">
                <span class="label-text">Birthday:</span>
                <span class="contact-error"></span>
              </label>
              <input type="text" name="birthday" placeholder="Your Birthday" class="c-form-birthday form-control" id="c-form-birthday">
            </div>

            <div class="form-group">
              <label for="c-form-email">
                <span class="label-text">Email:</span>
                <span class="contact-error"></span>
              </label>
              <input type="text" name="email" placeholder="Your Email Address" class="c-form-email form-control" id="c-form-email">
            </div>

            <div class="form-group">
              <label for="c-form-cell">
                <span class="label-text">Cell Phone:</span>
                <span class="contact-error"></span>
              </label>
              <input type="text" name="cell" placeholder="Your Cell Phone Number" class="c-form-cell form-control" id="c-form-cell">
            </div>


            <div class="btn-group">

              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
              </ul>

              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
              </ul>

              <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Separated link</a>
                </li>
              </ul>

            </div>


            <button type="submit" class="btn">Submit Information</button>

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

＆＃13;

＆＃13;

＆＃13;

这是我的css文件：

＆＃13;

＆＃13;

body {

  font-family: 'Roboto', sans-serif;

  font-size: 16px;

  font-weight: 300;

  color: #888;

  line-height: 30px;

  text-align: center;

}

strong {

  font-weight: 500;

}

a,

a:hover,

a:focus {

  color: #de615e;

  text-decoration: none;

  -o-transition: all .3s;

  -moz-transition: all .3s;

  -webkit-transition: all .3s;

  -ms-transition: all .3s;

  transition: all .3s;

}

h1,

h2 {

  margin-top: 10px;

  font-size: 38px;

  font-weight: 100;

  color: #555;

  line-height: 50px;

}

h3 {

  font-size: 22px;

  font-weight: 300;

  color: #555;

  line-height: 30px;

}

img {

  max-width: 100%;

}

::-moz-selection {

  background: #de615e;

  color: #fff;

  text-shadow: none;

}

::selection {

  background: #de615e;

  color: #fff;

  text-shadow: none;

}

.btn-link-1 {

  display: inline-block;

  height: 50px;

  margin: 5px;

  padding: 16px 20px 0 20px;

  background: #de615e;

  font-size: 16px;

  font-weight: 300;

  line-height: 16px;

  color: #fff;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

}

.btn-link-1:hover,

.btn-link-1:focus,

.btn-link-1:active {

  outline: 0;

  opacity: 0.6;

  color: #fff;

}

.btn-link-1.btn-link-1-facebook {

  background: #4862a3;

}

.btn-link-1.btn-link-1-twitter {

  background: #55acee;

}

.btn-link-1.btn-link-1-google-plus {

  background: #dd4b39;

}

.btn-link-1 i {

  padding-right: 5px;

  vertical-align: middle;

  font-size: 20px;

  line-height: 20px;

}

.btn-link-2 {

  display: inline-block;

  height: 50px;

  margin: 5px;

  padding: 15px 20px 0 20px;

  background: rgba(0, 0, 0, 0.3);

  border: 1px solid #fff;

  font-size: 16px;

  font-weight: 300;

  line-height: 16px;

  color: #fff;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

}

.btn-link-2:hover,

.btn-link-2:focus,

.btn-link-2:active,

.btn-link-2:active:focus {

  outline: 0;

  opacity: 0.6;

  background: rgba(0, 0, 0, 0.3);

  color: #fff;

}

/***** Top content *****/

.inner-bg {

  padding: 100px 0 170px 0;

}

.top-content .text {

  color: #fff;

}

.top-content .text h1 {

  color: #fff;

}

.top-content .description {

  margin: 20px 0 10px 0;

}

.top-content .description p {

  opacity: 0.8;

}

.top-content .description a {

  color: #fff;

}

.top-content .description a:hover,

.top-content .description a:focus {

  border-bottom: 1px dotted #fff;

}

.form-box {

  margin-top: 35px;

}

.form-top {

  overflow: hidden;

  padding: 0 25px 15px 25px;

  background: #444;

  background: rgba(0, 0, 0, 0.35);

  -moz-border-radius: 4px 4px 0 0;

  -webkit-border-radius: 4px 4px 0 0;

  border-radius: 4px 4px 0 0;

  text-align: left;

}

.form-top-left {

  float: left;

  width: 75%;

  padding-top: 25px;

}

.form-top-left h3 {

  margin-top: 0;

  color: #fff;

}

.form-top-left p {

  opacity: 0.8;

  color: #fff;

}

.form-top-right {

  float: left;

  width: 25%;

  padding-top: 5px;

  font-size: 66px;

  color: #fff;

  line-height: 100px;

  text-align: right;

  opacity: 0.3;

}

.form-bottom {

  padding: 25px 25px 30px 25px;

  background: #444;

  background: rgba(0, 0, 0, 0.3);

  -moz-border-radius: 0 0 4px 4px;

  -webkit-border-radius: 0 0 4px 4px;

  border-radius: 0 0 4px 4px;

  text-align: left;

}

.form-bottom form textarea {

  height: 100px;

}

.form-bottom form button.btn {

  width: 100%;

}

.form-bottom form .input-error {

  border-color: #de615e;

}

.social-login {

  margin-top: 35px;

}

.social-login h3 {

  color: #fff;

}

.social-login-buttons {

  margin-top: 25px;

}

/***** Media queries *****/

@media (min-width: 992px) and (max-width: 1199px) {}@media (min-width: 768px) and (max-width: 991px) {}@media (max-width: 767px) {

  .inner-bg {

    padding:60px 0 110px 0;

  }

}

@media (max-width: 415px) {

  h1,

  h2 {

    font-size: 32px;

  }

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试这样的事情：

 <div class='btn-toolbar'>
    <div class='btn-group'>
        <button class="btn-danger signin">Sign In</button>
        <button class="btn-success signup">Sign Up</button>
    </div>
</div>

Answer 2

我运行了你的代码，它看起来像这样：enter image description here

所以你的代码是对的，也许你在css传递中做了一些改变。 使用检查元素附近操作按钮检查它，看看你在样式部分中给出了多少宽度