Html 移动设备上的内置引导按钮

我试图在手机上的同一条线上安装两个按钮。桌面上的按钮位于同一条线上，但一旦移动，它们就会堆叠在一起。我曾尝试向div类添加内联块标记，但它们仍然堆叠在一起，尽管大小正确

这是我的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> 

---

向两个BTN添加

col-sm-6 col-xs-6

。这表示当屏幕较小或X较小时。它们保持50%的宽度。

Bootstrap拥有适用于手机的类

xs

，以及适用于平板电脑的类

sm

。实际上，您只需要将

col-xs-6

添加到两个类中，因为这将影响所有其他宽度，除非另有说明。从引导程序：

类的每一层都会向上扩展，这意味着如果您计划为xs和sm设置相同的宽度，您只需要指定xs。

您可以研究一下这一点

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

看起来有些过分，除非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

.my-button{
    width:100%;
}

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