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

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

html css twitter-bootstrap

Html 如果页面变小，如何将按钮移动到新行,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,如果页面变小，我希望一组按钮向下移动一行并居中。这是我的一段代码 <div ng-controller="MenuController"> <p align="center"> <div class="col-sm-2 centeralign" style="position:absolute;right:40px;top:50px;float: right;"> <button class="bt

如果页面变小，我希望一组按钮向下移动一行并居中。这是我的一段代码

    <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，但我似乎无法让响应功能正常工作。当我使用responsive时，按钮只会变小。

您可以使用带有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的按钮元素。您应该将这些更改为唯一的，否则可能会遇到其他问题

下面是一个引导示例：

您可以使用一个包含两列的引导行在小屏幕上堆叠元素

在此代码中，按钮将出现在中/大屏幕上图像的右侧，以及小/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的按钮元素。您应该将这些更改为唯一的，否则可能会遇到其他问题

下面是一个引导示例：

您可以使用一个包含两列的引导行在小屏幕上堆叠元素

在此代码中，按钮将出现在中/大屏幕上图像的右侧，以及小/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的按钮元素。您应该将这些更改为唯一的，否则可能会遇到其他问题

下面是一个引导示例：

您可以使用一个包含两列的引导行在小屏幕上堆叠元素

在此代码中，按钮将出现在中/大屏幕上图像的右侧，以及小/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的按钮元素。您应该将这些更改为唯一的，否则可能会遇到其他问题

这里有一个bootply示例：

一切都错了！你不能将div放在

标记中，你可能会在呈现的html上引起错误，在chrome开发工具、选项卡元素上检查它，不要将CSS内联，而是使用类。你的代码很痛苦，我无法想象你在做什么。Bootstrap非常容易使用，请阅读文档以正确使用它

检查时不要带标签

一切都错了！你不能将div放在

检查时不要带标签

一切都错了！你不能将div放在

检查时不要带标签

一切都错了！你不能将div放在

检查时不要带标签

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

另外，不要试图覆盖引导边界、填充等与网格系统有关的所有内容，只是不要。通常会导致意外行为，所以请坚持使用引导网格样式

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

要使网格内容居中，请使用“文本中心”类。除了文本，我不喜欢文本中心对元素进行居中，我更喜欢边距：0自动，但现在可以

现在，您希望按钮位于img下方的中心。所以您可以使用引导响应实用程序，所以隐藏-*类将帮助您。更多信息所以，我做了另一行，我对lg、md、sm隐藏它，只让xs（小型设备）可以看到它。当设备宽度小于xs约束时，我隐藏第一行（图像上的按钮）。不过，您可以自己处理这些值，并根据自己的喜好修复它们

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

你可以用这个。下面是一些代码：

<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>


退出
评估员