移动设备上如何让 Bootstrap 按钮变成行内元素

Question

我正在尝试在移动设备上将两个按钮放在同一行。这两个按钮在桌面上是在同一行的，但是在移动设备上它们会堆叠在一起。我尝试为 div 类添加 inline-block 标签，但是它们仍然堆叠在一起，尽管大小正确为 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%;
}

- Zcarpman

Answer 1

CSS 看起来有些过头了，除非 OP 在问题中提到了其他设计任务。

如果你只是想在任何设备上保持两个按钮的行内排列，你可以使用以下方法...

<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。

- Deja Vu

Answer 2

Bootstrap有xs类针对手机和sm类针对平板电脑。实际上，您只需要在两个类中添加col-xs-6，这将影响除非另有说明否则所有其他宽度。来自Bootstrap docs： 每个类别的级别都会扩大，这意味着如果您计划为xs和sm设置相同的宽度，则只需指定xs。

- gffbss

Answer 3

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

- Jose Mar

Answer 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">。要理解这个网格系统，请查看官方文档。编程愉快。

- jofftiquez