在移动屏幕尺寸上将按钮更改为“btn-block”-Java 学习之路

使用Bootstrap 3，有没有办法让按钮在“xs”屏幕尺寸时使用btn-block类？

目前我的表格有一些行包含3个下拉列表和两个按钮，在大中型屏幕上看起来很好 .

当窗体在小屏幕上更改，并且窗体控件被迫垂直流动时，按钮保持相同的大小并且看起来很笨，它们被推到屏幕的左侧 .

理想情况下，我希望能够在较小的屏幕尺寸上将它们作为块按钮，因此它们占据整个宽度（表单的形式，与表单控件一样）并使其看起来更好一些 .

5 回答

对于Bootstrap 4，我使用这个：

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

请参阅此处以供参考 - http://v4-alpha.getbootstrap.com/layout/overview/

回复于 2024-04-24T09:29:50+08:00

0
将自定义类添加到按钮，并使用媒体查询在设备上将宽度设置为100％，直到断点 . 所以即
```
<button class"bootstrap classes custom-class></button>
```
并在CSS中
```
@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}
```
您还可以通过在不同断点上设置媒体查询来控制此断点上方发生的情况 .
回复于 2024-04-24T09:29:50+08:00

如果您只想使用“本机”引导类，则可以执行以下操作：

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">

回复于 2024-04-24T09:29:50+08:00

将下面显示的CSS添加到 Bootstrap 3 应用程序可以支持

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

提供 btn-block 变体的类，它们具有响应性并且特定于视口的大小 .

如果您有多个并排的按钮，并且它们不适合小屏幕，因此打破并包装到另一条线，只需将 btn-xs-block 或 btn-sm-block （或在极少数情况下为其他类之一）添加到按钮中它们将会全宽并堆叠在小屏幕上：

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

Bootstrap 3的CSS：

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}

回复于 2024-04-24T09:29:50+08:00

您还可以将按钮放在网格中，这样您就不必编写任何额外的CSS .

<div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>

回复于 2024-04-24T09:29:50+08:00

在移动屏幕尺寸上将按钮更改为“btn-block”

5 回答

相关问题