Angularjs 分屏分为三列，角料设计_Angularjs_Angularjs Material

Angularjs 分屏分为三列，角料设计

angularjs

Angularjs 分屏分为三列，角料设计,angularjs,angularjs-material,Angularjs,Angularjs Material,我是角材料设计的新手。我想设计一个表格，将日期分为三列。我创建了两个表单。第一个表单包含两个div，第二个表单包含一个div。我希望每个div在屏幕的不同列中，三个div应该平均划分屏幕宽度，比如说100%宽度的33.33%，但我只在一列中获得所有div。下面是我编写的代码： <body ng-app="inputErrorsAdvancedApp"> <div ng-controller="AppCtrl" layout="column" ng-cloak>

我是角材料设计的新手。我想设计一个表格，将日期分为三列。我创建了两个表单。第一个表单包含两个div，第二个表单包含一个div。我希望每个div在屏幕的不同列中，三个div应该平均划分屏幕宽度，比如说100%宽度的33.33%，但我只在一列中获得所有div。下面是我编写的代码：

<body ng-app="inputErrorsAdvancedApp"> 
   <div ng-controller="AppCtrl" layout="column" ng-cloak>
     <div md-content layout-padding>
       <form name="userForm">
        <div layout-xs="column">  
          <md-input-container class="md-block" flex="30">
            <label>First Name</label>
            <input>
          </md-input-container> 
          <md-input-container class="md-block" flex="30">
           <label>Last Name</label>
           <input>
          </md-input-container> 
          <md-input-container class="md-block" flex="30">
            <label>Date Of Birth</label>
            <input>
            </md-input-container>
          <md-input-container class="md-block" flex="30">
            <label>Gender</label>
            <input>
            </md-input-container>
          <md-input-container class="md-block" flex="30">
            <label>Email</label>
            <input>
          </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>Mobile</label>
           <input>
         </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>Address</label>
           <input>
         </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>City</label>
           <input>
        </md-input-container>     
  </div>
  <div layout-xs="column">
    <md-input-container class="md-block" flex="30">
      <label>Country</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>State</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
     <label>Phone</label>
     <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>Alternate Email</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>Alternate Mobile</label>
      <input>
    </md-input-container>
  </div>
</form>
<form name="security">
   <div layout-xs="column">
   <md-input-container class="md-block" flex="30">
     <label>old password</label>
    <input>
   </md-input-container>
   <md-input-container class="md-block" flex="30">
    <label>New Password</label>
    <input>
   </md-input-container>
   <md-input-container class="md-block" flex="30">
    <label>Re-Enter Password</label>
    <input>
   </md-input-container>    
  </div>
 </form>
 </div>


名字
姓
出生日期
性别
电子邮件
可移动的
地址
城市
国家
陈述
电话
备用电子邮件
备用移动电话
旧密码
新密码
重新输入密码

这是我创建的页面的plunker

请帮助我解决这个问题

在父元素上使用

layout=“row”

。比如说


…形式。。。

链接到文档：

在父元素上使用

layout=“row”

。比如说


…形式。。。

链接到文档：

您的flex就像分割屏幕一样。你可以这样用。屏幕必须划分为100%。如果使用3div或md，则输入容器flex应为33。i、 e 100/3。如果您有4个div，您应该将屏幕100%划分为4个相等的部分

    <div layout-xs="column">  
              <md-input-container class="md-block" flex="33">
                <label>First Name</label>
                <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
               <label>Last Name</label>
               <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
                <label>Date Of Birth</label>
                <input>
              </md-input-container>
</div>


名字
姓
出生日期

有关更多信息，请访问angular material官方网站。

    <div layout-xs="column">  
              <md-input-container class="md-block" flex="33">
                <label>First Name</label>
                <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
               <label>Last Name</label>
               <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
                <label>Date Of Birth</label>
                <input>
              </md-input-container>
</div>


名字
姓
出生日期

有关更多信息，请访问angular material官方网站。

请将您的编辑作为评论或新问题发布到我的答案中。我很高兴能帮上忙！请将您的编辑以评论或新问题的形式发布到我的答案中。我很高兴能帮上忙！非常感谢您的回答。我按照您的指示做了。数据分为三列，但这三列不适合整个桌面屏幕。这是我更新的plunker，您可以在表单上设置flex=“50”以使其填充页面。我尝试应用flex属性，但它仍然不适用于桌面的整个屏幕。谢谢你的指导。非常感谢你的回答。我按照你的指示做了。数据分为三列，但这三列不适合整个桌面屏幕。这是我更新的plunker，您可以在表单上设置flex=“50”以使其填充页面。我尝试应用flex属性，但它仍然不适用于桌面的整个屏幕。谢谢你的指导。