Question

尝试用一些按钮构建一个应用程序，似乎不可能强制它们是水平的，几乎就像它们默认想要垂直对齐以获得它的乐趣。

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

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

据我所知，如果我创建一个按钮组（在这种情况下是一个btn工具栏）并且我告诉它是col-md-1那么这些按钮中的每一个应该占用btn工具栏空间的1列。但我不知道如何设置工具栏宽度。

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

两个菜单小节

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-显示= 'app.menushow'） .btn - 工具栏 .menucontainer.col-LG-6.col偏移-4- 一个（HREF = “/ boompad”） .button .btn.btn-sm.col-MD-1.btn-primary.btn-topmny。关于 .button .btn.btn-md.col-MD-1.btn-XLARGE。制作音乐一个（HREF = “/配置”） .button .btn.btn-md.col-MD-1.btn-XLARGE。配置一个（HREF = “/”） .button .btn.btn-md.col-MD-1.btn-XLARGE。家一个（HREF = “/登录”） .button .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-*值会在某个时刻变为水平。标准屏幕尺寸位于引导网站网址：http://getbootstrap.com/css/#grid-options

lg for screen＆gt; = 1170px将是水平的。以下相同。
md＆gt; = 970px
sm＆gt; = 750px

因此，如果您希望元素是水平的，无论屏幕大小是多少，那么我们需要使用col-xs-*值。

希望这有帮助。

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

1 个答案: