Question

使用Bootstrap 3，有没有办法让按钮在＆＃34; xs＆＃34;上使用btn-block类。屏幕尺寸？

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

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

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

Answer 1

将自定义类添加到按钮，并使用媒体查询在设备上将宽度设置为100％，直到断点。所以

<button class"bootstrap classes custom-class></button>

和CSS

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}

您还可以通过在不同的断点上设置媒体查询来控制此断点之上发生的事情。

Answer 2

将下面显示的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;
    }
}

Answer 3

对于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/

Answer 4

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

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

Answer 5

对于Bootstrap 4.3，您可以使用内置类。手机：展示架桌面：显示嵌入式块

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>

Answer 6

您还可以将按钮放置在网格中，因此不必编写任何其他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>

Answer 7

这是我为Bootstrap 4提出的解决方案，因为我希望保持按钮居中，除非在移动分辨率下要填充容器。

这涉及在任一侧创建一个以最小尺寸d-none隐藏但在较小的d-sm-block上可见的网格列，然后我为较大的上方设置更大的尺寸，以便按钮保持合理所有尺寸的宽度：

<div class="row">
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
   <div class="col-md text-center">
      <button type="submit" class="btn btn-primary btn-block">Register</button>
   </div>
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
</div>

Answer 8

引导程序4-阻止移动屏幕大小按钮.btn-*-block

/* Blocks Mobile Screen Size buttons
   .btn-xs-block
   .btn-sm-block
   .btn-md-block
   .btn-lg-block
*/

@media (max-width: 767px) {
    .btn-xs-block {
        display: flex;
        width: 100%;
    }
    /*
        Extra config:
        .btn-xs-block .btn {
            flex-grow: 1;
        }
    */
    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: flex;
        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: flex;
        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: flex;
        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;
    }
}

Answer 9

对于Bootstrap 4.4，我写了以下（SCSS），因为它与其他响应实用程序（例如text-*-center）一致：

// Generate series of `.btn-*-inline-block` (plus `.btn-inline-block` itself)
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  .btn#{$infix}-inline-block {
    @include media-breakpoint-up($breakpoint) {
      display: inline-block;
      width: auto;
    }
  }
}

用法示例（一个按钮，它会扩展到util lg断点的全角）：

<a href="#" class="btn btn-primary btn-block btn-lg-inline-block">Button</a>

将按钮更改为＆＃34; btn-block＆＃34;在移动屏幕尺寸上

9 个答案: