移动设备上的内联引导按钮答案

【问题标题】：Bootstrap buttons inline on mobile移动设备上的内联引导按钮
【发布时间】：2015-08-18 10:33:49
【问题描述】：

我正在尝试在移动设备上的同一行上获取两个按钮。这些按钮在桌面上位于同一行，但一旦移动，它们就会堆叠在一起。我尝试向 div 类添加一个 inline-block 标记，但它们仍然堆叠，尽管大小正确为 50 50。

这是我的html：

<div class="buttonDiv">
        <div class="row">
        <div class="col-lg-6">
            <button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
        </div>

        <div class="col-lg-6">
            <button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
        </div>
    </div>
    </div>

这里是相关的 CSS：

.buttonDiv{
    position:relative;
    bottom:90px;
    font-family: "Cabin Condensed";
    font-weight:700;
    display:inline-block;
}

#buttonCustom{
    position:relative;
    margin-bottom:10px;
    height:10%;
    width:100%;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

css 看起来有点矫枉过正，除非 OP 解决了他在问题中没有提到的其他一些设计任务。

如果您只想在任何设备上保持 2 个内联按钮，那么您可以逃脱...

<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-primary">SIGN UP</button>
        <button class="btn btn-primary">CHECK STANDINGS</button>
    </div>
</div>

...并且不需要额外的css。

fiddle.

【讨论】：

【解决方案2】：

Bootstrap 的类 xs 用于手机，sm 用于平板电脑。实际上，您只需将col-xs-6 添加到您的两个类中，因为除非另有说明，否则这将影响所有其他宽度。从引导程序docs： Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

【讨论】：

【解决方案3】：

将col-sm-6 col-xs-6 添加到两个btns。这表示当屏幕为小尺寸或xsmall 尺寸时。它们保持 50% 的宽度。

【讨论】：

【解决方案4】：

你可以看看这个JsFiddle。

HTML

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <h1>Some content</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
        <button class="btn btn-primary my-button">Sign Up</button>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
        <button class="btn btn-primary my-button">Check Standings</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <h1>Some content</h1>
    </div>
</div>

CSS

.my-button{
    width:100%;
}

您可以使用<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2"> 这些行的类的值。想了解这个grid-system可以看官方documentation。快乐编码。

【讨论】：