Question

我需要将按钮组置于页面顶部。我尝试添加自定义css和保证金：0自动，但它没有帮助。有什么建议？谢谢（我使用bootstrap v4.0.0-alpha.6）

HTML：

    <head>

        <title>Title</title>

        <link rel="stylesheet" href="bootstrap.min.css">
        <link rel="stylesheet" href="application.css">

        <script src="jquery-3.1.1.min.js"></script>
        <script src="jquery-ui.js"></script>
        <script src="application.js"></script>

    </head>

    <body>

        <div id="header">

            <div id="logo">

                Logo

            </div>

            <div id="button-container" class="btn-group">

                <button class="btn btn-primary">Button 1</button>
                <button class="btn btn-primary">Button 2</button>
                <button class="btn btn-primary">Button 3</button>
                <button class="btn btn-primary">Button 4</button>

            </div>

        </div>

    </body>

</html>

的CSS：

#button-container {
    width: 333px;
    margin: 0 auto !important;
}

Answer 1

井按钮组是一个inline-block元素，所以只需将其放在class="text-center"容器中，无论是标头本身还是单独的div，如此演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div id="header">

  <div id="logo">

    Logo

  </div>
  <div class="text-center">
    <div id="button-container" class="btn-group">

      <button class="btn btn-primary">Button 1</button>
      <button class="btn btn-primary">Button 2</button>
      <button class="btn btn-primary">Button 3</button>
      <button class="btn btn-primary">Button 4</button>

    </div>
  </div>


</div>

Answer 2

您可以尝试以下内容，

#button-container {
    width: 333px;
    margin: 0 auto !important;   
    left:50%;  /*MODIFICATION*/
    transform: translate(-50%,-50%); /*MODIFICATION*/
}

＆＃13;

#button-container {
    width: 333px;
    margin: 0 auto !important;   
    left:50%;
    transform: translate(-50%,-50%);
}

＆＃13;

 <head>

        <title>Title</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div id="header">

            <div id="logo">

                Logo

            </div>

            <div id="button-container" class="btn-group">

                <button class="btn btn-primary">Button 1</button>
                <button class="btn btn-primary">Button 2</button>
                <button class="btn btn-primary">Button 3</button>
                <button class="btn btn-primary">Button 4</button>

            </div>

        </div>

    </body>

＆＃13;

Answer 3

这与已接受的答案非常相似，除了按钮总是 center aligned（即使它们在小型设备（或分辨率）上占用多行）。

.btn-group-vertical>.btn, 
.btn-group>.btn {
    float: unset !important;
    text-align: center;
}

.btn {
  margin: 8px;
  border-radius: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="logo">Logo</div>

<div class="text-center">
    <div id="button-container" class="btn-group">
      <button class="btn btn-primary">Button Text 1</button>
      <button class="btn btn-primary">Button Text 2</button>
      <button class="btn btn-primary">Button Text 3</button>
      <button class="btn btn-primary">Button Text 4</button>
      <button class="btn btn-primary">Button Text 5</button>
    </div>
</div>

如何水平居中自举按钮组

3 个答案: