Html 对于小屏幕和大屏幕，如何将这些引导元素从内联显示到垂直显示，或从垂直显示到内联显示_Html_Css_Twitter Bootstrap

Html 对于小屏幕和大屏幕，如何将这些引导元素从内联显示到垂直显示，或从垂直显示到内联显示

html css twitter-bootstrap

Html 对于小屏幕和大屏幕，如何将这些引导元素从内联显示到垂直显示，或从垂直显示到内联显示,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想以两种不同的格式显示这些引导元素，以提高响应能力：格式1：当屏幕足够大时，以内联方式显示它们（下图）。格式2：当屏幕较小时，垂直显示（下图）。以下是代码： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" co

我想以两种不同的格式显示这些引导元素，以提高响应能力：

格式1：当屏幕足够大时，以内联方式显示它们（下图）。

格式2：当屏幕较小时，垂直显示（下图）。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">  
  <form class="form-inline" role="form">
     <div class="form-group">       
        <div class="row form-group ">   
            <label for="birthday" class="col-xs-2 control-label"></label>
            <div class="col-xs-3">
               <label for="form-input-col-xs-2" class="wb-inv">Administrative Job:</label>
               <input type="text" class="form-control" id="form-input-col-xs-2" placeholder="job" />
            </div>
            <div class="col-xs-3">
               <label for="form-input-col-xs-3" class="wb-inv"> Effective Date:</label>
               <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="date" />
            </div>
           <div class="col-xs-3">
              <label for="form-input-col-xs-4" class="wb-inv">Payroll Amount:</label>
              <input type="text" class="form-control" id="form-input-col-xs-4" placeholder="amount" />
           </div>        
        </div>      
    </div>  
  </form>  
</div>
</body>
</html>


引导示例
行政职务：
生效日期：
工资总额：

请建议我，需要做什么修改？请让我知道更多信息。感谢使用引导网格系统，您可以使用不同的类，如

col sm、col lg

等，在不同的屏幕上以不同的方式显示元素

因此，修改：

<div class="col-xs-3">

到

这将在大屏幕上将

div

显示为3列，对于非常小的屏幕，将其更改为12列，从而将其堆叠或垂直显示

类似地，您也必须对标签做一些更改，因为类现在已经被修改了

阅读更多关于它的信息

此解决方案适用于大屏幕和小屏幕，并具有足够的空间。但是，当屏幕尺寸为中等时，这些元素会变得杂乱无章，它们之间没有任何间隙（如下所示），当屏幕为中等时，可以使用相同的垂直样式。
您混合的类（通常）不适合您尝试构建的布局类型。您不需要（通常也不应该）将
表单组
和
行
等类以及
列
与
内联表单
混合在一起
基于图像，您有一个基本布局。请参阅示例代码段并参考

行政职务：生效日期：工资总额：
引导的原理非常简单：你可以将任何元素分成12等份，给它一个
.row
类和它的imediate子类
.col-XX-N
，其中
XX
是设备大小选择器，
N
是12个列中的列数。如果孩子们的总数超过12，则新的一行开始。其实没那么简单，但这是起点，也是最重要的部分
例如：

[class^=“col-”]{padding:10px；}

在大于1200px的屏幕上，我是四分之一（3/12），在992px和1200px之间的屏幕上是三分之一（4/12），在768px和991px之间的屏幕上是一半（6/12），在767px以下的屏幕上是满的（因为我们没有指定列xs）在大于1200px的屏幕上，我是四分之一（3/12），在992px和1200px之间的屏幕上是三分之一（4/12），在768px和991px之间的屏幕上是一半（6/12），在767px以下的屏幕上是满的（因为我们没有指定列xs）在大于1200px的屏幕上，我是四分之一（3/12），在992px和1200px之间的屏幕上是三分之一（4/12），在768px和991px之间的屏幕上是一半（6/12），在767px以下的屏幕上是满的（因为我们没有指定列xs）在大于1200px的屏幕上，我是四分之一（3/12），在992px和1200px之间的屏幕上是三分之一（4/12），在768px和991px之间的屏幕上是一半（6/12），在767px以下的屏幕上是满的（因为我们没有指定列xs）
Nikhil，你试过你的建议了吗？他在标签上贴上了col-xs-2。。。我建议将每个标签+输入包装在一个
col-md-4
（或
col-lg-4
）中。嘿@AndreiGheorghiu，我刚刚给出了对不同设备使用不同类的总体想法，当然在不同的地方需要特定的更改。不过，我会编辑答案来表达同样的谢意，我没有投你反对票。我想知道那可能是谁……：）@AndreiGheorghiu无问题：）Hi@Nikhil Batra该解决方案工作正常。但是我编辑了你的文章，以获得更多的中级解决方案。全部是5005768。而且，作为记录，它不是免费的编码服务提供商。你的问题不属于编码错误，而是我所看到的编码需求。我们在这里是为了帮助您磨练编码技能，而不是为了您。我在Nikhil的回复中指出了您需要的确切文档，并建议了您可能遇到的问题的解决方案。祝你好运。你好，安德烈·盖尔古。谢谢。我知道SO不是一个免费的编码服务提供商。而且我是bootstrap的初学者。我已经阅读了您建议的文档。因此，根据我对内联样式的理解，我在1列中嵌套了3列。但是对于垂直样式，如何在1列中嵌套3行。我还是不明白。谢谢你的努力，我会给你一个答案。你能给我指一下引导文档吗？这里不鼓励将列与表单布局类混合使用，请问？@AndreiGheorghiu我在回答中引用了文档中的任何内容，因为我没有看到任何可以识别为一个的内容，但似乎你在错误地引用我，因为我说的是“带有内联表单的列”，而不是你所说的“表单布局”。旁注；您的前两个示例中有
class=“wb inv col-xs-12”>
，这似乎不合适。正确，我错过了这一个。谢谢我的问题是真实的。也许太正式了，但我以为你知道一些我不知道的事。
<div class="col-xs-12 col-lg-3">