Question

我希望一组按钮向下移动一行并在页面变小时居中。这是我的代码片段......

    <div ng-controller="MenuController">
    <p align="center">
        <div class="col-sm-2 centeralign" style="position:absolute;right:40px;top:50px;float: right;">
            <button class="btn btn-small btn-default" id="signout" ng-click="signout()">Sign Out</a>
            <button class="btn btn-small btn-primary" style="margin-left: 5px" id="signout" ui-sref="assessment" ng-show="isActive('/modules')" ng-click="hide = false">Assessments</a>
            <button class="btn btn-small btn-primary" style="margin-left: 5px" id="signout" ui-sref="modules" ng-show="isActive('/assessment')" ng-click="hide = true">Modules</a>

        </div>
        <div class="centeralign" style="margin:0">
            <img style="max-width:100%; max-height:100%;"src="images/ceresti-health-logo-500.png"><br><br>
        </div>
        <br>
    </p>

当页面较小时，我希望按钮组居中并且不再显示图像。我更喜欢使用bootstrap，但我似乎无法使响应功能正常工作。当我使用响应时，按钮只会变小。

Answer 1

您可以使用带有2列的引导行来在小屏幕上堆叠元素。

在此代码中，按钮将显示在中/大屏幕上的图像右侧和小/ x小屏幕上的图像下方。这是你正在寻找的吗？

<div class="container" ng-controller="MenuController">
  <div class="row">
     <div class="col-sm-6 text-center">
       <img style="max-width:100%; max-height:100%;" src="images/ceresti-health-logo-500.png">
     </div> 
     <div class="col-sm-6 text-center">
       <button class="btn btn-small btn-default" id="signout1" ng-click="signout()">Sign Out</button>
       <button class="btn btn-small btn-primary" id="signout2" ui-sref="assessment" ng-show="isActive('/modules')" ng-click="hide = false">Assessments</button>
       <button class="btn btn-small btn-primary" id="signout3" ui-sref="modules" ng-show="isActive('/assessment')" ng-click="hide = true">Modules</button>
    </div>
  </div>
</div>

作为次要问题，您的代码中有3个具有相同ID的按钮元素。您应该将这些更改为唯一，否则您可能会遇到其他问题。

这是一个很好的示例：http://www.bootply.com/ZiDaTOhjPy

Answer 2

您需要查找有关网格系统的更多示例和引导文档。另外，在p元素中嵌套div不是正确的方法。

另外，不要试图覆盖bootstrap边距，填充等。与网格系统有关的一切，都不要。经常导致意外行为，因此坚持使用自举网格样式。

正如您在示例中所看到的，我创建了一个容器，在其中我放了3行。请记住，始终将容器作为最佳实践使用行。现在在内部行中，我嵌套了一个使用网格系统类的div。请记住，作为一种最佳实践，总是在一行中放入带有col - * - （1-12）类的div。这修复了该行的一些边距样式。

要使网格内容居中，请使用文本中心类。我不喜欢使用文本中心对文本中心的元素进行居中，我更喜欢margin：0 auto，但现在这样做。

现在，您希望按钮在img下居中。所以你可以使用bootstrap响应实用程序，所以hidden- * class会帮助你。更多信息here 所以，我又做了一行，我把它保存在lg，md，sm中，只让它对xs（小型设备）可见。当设备宽度小于xs约束时，我隐藏第一行（图像上的按钮）。您可以自己玩这些值，然后根据需要修复它们。

我知道，使用重复内容并不总是最佳方案，但在这种情况下，这是解决问题的快捷方式！

您可以使用此plunk。这是一些代码：

<div ng-controller="MenuController" class="container">
  <div class="row">
    <div class="col-sm-12 text-center hidden-xs">
      <button class="btn btn-small btn-default" id="signout" ng-click="signout()">Sign Out
          </button>
      <button class="btn btn-small btn-primary" style="margin-left: 5px" id="signout" ui-sref="assessment" ng-show="isActive('/modules')" ng-click="hide = false">Assessments
          </button>
      <button class="btn btn-small btn-primary" style="margin-left: 5px" id="signout" ui-sref="modules" ng-show="isActive('/assessment')" ng-click="hide = true">Modules
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 text-center">
      <img style="max-width:100%; max-height:100%;" src="http://placehold.it/272x178" />
    </div>
  </div>
  <div class="row hidden-sm hidden-md hidden-lg">
    <div class="col-sm-12 text-center">
      <button class="btn btn-small btn-default btn-block" id="signout" ng-click="signout()">Sign Out
          </button>
      <button class="btn btn-small btn-primary btn-block" id="signout" ui-sref="assessment" ng-show="isActive('/modules')" ng-click="hide = false">Assessments
          </button>
      <button class="btn btn-small btn-primary btn-block" id="signout" ui-sref="modules" ng-show="isActive('/assessment')" ng-click="hide = true">Modules
      </button>
    </div>
  </div>
</div>

Answer 3

一切都错了！你不能把div放在<p>标签内，你可以导致bug，渲染的html，检查chrome dev工具，标签元素，不要把CSS内联，使用类代替。你的代码很痛苦，我无法想象你在做什么。引导它很容易使用，阅读文档以正确使用它。

在没有<p>标记的情况下进行检查。

http://jsfiddle.net/n8h8te09/

如果页面变小，如何将按钮移动到新行

3 个答案: