在引导程序中强制按钮水平

Question

一直在尝试构建一个带有一些按钮的应用程序，但似乎无法强制它们水平排列，就像他们默认情况下希望垂直对齐以获得乐趣一样。

据我所知，它在某种程度上与页面的宽度有关，据我所知，它基于列系统

这是我的问题，我在布局中创建了一个菜单，并将其水平排列，然后将其移动到指令中，一部分正确排列（顶部位），第二部分排列为垂直。

据我了解，如果我创建一个按钮组（在本例中为 btn-toolbar）并告诉它是 col-md-1，那么这些按钮中的每一个都应该占用 btn-toolbar 空间的 1 列.但我不知道如何设置工具栏宽度。

我正在使用 Stylus 和 Jade 以及 angular。因此事物的外观

两个菜单片段

div.layout
    div.topmenu(ng-show="app.menushow")
        .btn-toolbar
            .topcontainer
                a(href="/about")
                    .button.col-md-offset-10
                        .btn.btn-sm.col-md-1.btn-primary.btn-topmny.
                            About
                a(href="/contact")
                    .button.col-md-offset-11
                        .btn.btn-sm.col-md-1.btn-primary.btn-topmny.
                            Contact-us

那个有效

还有这个 div.botmenu(ng-show='app.menushow') .btn-工具栏 .menucontainer.col-lg-6.col-offset-4 a(href="/boompad") 。按钮 .btn.btn-sm.col-md-1.btn-primary.btn-topmny。 关于 。按钮 .btn.btn-md.col-md-1.btn-xlarge。 制作音乐 一个（href="/配置"） 。按钮 .btn.btn-md.col-md-1.btn-xlarge。 配置 一个（href="/"） 。按钮 .btn.btn-md.col-md-1.btn-xlarge。 家 a(href="/登录") 。按钮 .btn.btn-md.col-md-1.btn-xlarge。 登录

控制它的 CSS

body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #525252 !important;
}
.btn-topmny {
  width: 75px;
}
.btn-xlarge {
  background-color: #888;
  filter: blur(5px);
  height: 175px;
  width: 175px;
  padding: 48px 28px;
  font-size: 22px;
  line-height: normal;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  border: 2 !important;
  margin-left: 15px;
  margin-bottom: 25px;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-weight: bold !important;
  box-shadow: 0 10 0 #006;
#ccc
}
.btn-xlarge:focus {
  outline: 0;
}
.btn-xlarge:hover {
  top: 2px;
}
.btn-xlarge:active {
  top: 6px;
}
.topcontainer {
  postition: absolute;
  top: 5;
}
.menucontainer {
  position: absolute;
  bottom: 0;

Answer 1

使用col-lg-* 或col-md-* 或col-sm-* 值会在屏幕变得小于其支持的尺寸时变为水平。标准屏幕尺寸在引导站点 url 中：http://getbootstrap.com/css/#grid-options

• lg for screen >= 1170px 将是水平的。以下内容相同。
• md >= 970px
• sm >= 750px

所以，如果你想让元素水平不管屏幕大小，那么我们需要使用col-xs-* 值。

希望这会有所帮助。