一行中的引导按钮答案

【问题标题】：Bootstrap buttons in one line一行中的引导按钮
【发布时间】：2017-05-30 08:21:38
【问题描述】：

这是我的代码，我不知道如何将按钮并排放置。（顺便说一句，我是编码新手）

<div class="second">
           <div class="col-md-12 text-center">
               <form>
            <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
               </form>
           </div>
            <div class="col-md-8 text-center">
                <form>
                    <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
                </form>
            </div>
        </div>

【问题讨论】：

标签： html twitter-bootstrap button

【解决方案1】：

只需将按钮放在同一个表单和div中

<div class="second">
     <div class="col-md-12 text-center">
           <form>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
      </div>
</div>

【讨论】：

【解决方案2】：

由于您使用的是引导程序，因此您需要了解以下几点：

.col 类如果不在 .container 和 .row 类中，将无法工作。另一个重要的事情是列数字大小加起来为 12；现在你的加到 20。所以你的代码应该看起来更像这样：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
       <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
    <div class="col-12 col-md-6">
      <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
       </form>
    </div>
  </div>
</div>

Here is a codepen to show it working

Refer to Bootstrap documentation on grids as well

【讨论】：

【解决方案3】：

<div class="row second">
    <div class="col-md-4 text-center">
            <form>
                 <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
            </form>
    </div>

    <div class="col-md-8 text-center">
            <form>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
    </div>
</div>

【讨论】：

【解决方案4】：

<div class="second">
       <div class="col-md-12 text-center">
           <form>
        <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
                <button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
            </form>
        </div>
    </div>

按钮在不同的列中，所以它向下一行。

阅读更多关于Bootstrap grid system

【讨论】：

【解决方案5】：

在查看下面的答案之前，我建议您阅读有关 boostrap 网格系统的信息。每行有 12 列。

您的第一个 <div> 用完了 12 列，这就是为什么第二个 <div> 的第二个按钮位于新行/行上的原因。

更多细节可以在这里找到： Bootstrap: Aligning two buttons on the same row

【讨论】：