需要帮助，在引导网格布局排列物品放在一起(Need help in aligning items t

2019-10-23 22:46发布

站内文章 / 前端开发
12 0 0

我想对齐7个项目在网格布局，使每个元素都被固定在它的地方目前我能做到像下面的截图。 这里是plunker对于相同的代码（但一些如何看起来不上plunker好）。

在我目前的状态的问题是分钟换到2号线。 此外，我怎么能利用来自代理额外的空间：标签区域和使空间得到利用复位按钮区域？

码

<div class="row">
    <div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
        <div ng-show="!loadinga">
            <b>Agent: </b>
        </div>
    </div>
    <div class="col-md-2" style="padding-left:0px;">
        <div class="dropdown " ng-show="!loadinga">
            <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
                {{dropDownTitle}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                <li ng-repeat="agent in agentListData">
                    <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-2" style="padding-left:0px;">
        <div class="dropdown " ng-show="!loadinga">
            <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
                {{dropDownAllTaskStatusTitle}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
                <li ng-repeat="task in taskStatusListData">
                    <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
        <div ng-show="!loadinga">
            <input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text" ng-blur="" />
        </div>
    </div>
    <div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
        <input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
        <label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running &lt; </label>
        <input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
    </div>
    <div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
        <input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
        <label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
    </div>
    <div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
        <button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
    </div>
</div>

更新

还是有办法让代理：标签和在同一行下拉没有给出单独的div与col-md-1类标签？

需要像下面的截图

Answer 1:

右，所以我在尝试解决这个低于，我不会给你的文字的同一个身体，因为你可以查看在以前的帖子。

这里是您所要求的所有部分完成的网格，它也奠定了更好的。 （它不是一个真正友好的设备的要求）。

我更新到正常工作的例子

码： 

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainController">
  <div class="container-fluid">
    <div class="row">
      <div class="hidden-xs col-sm-2 sidebar">
        <div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
            <div class="navbar navbar-custom" role="navigation">
              <ul class="nav recommendation-nav">
                <li class="active">
                  <a href="#/"><img style="padding-right: 5px" /> Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px"  />Side bar 1</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px" />Side bar 2</a>
                </li>
                <li >
                  <a href="#/"><img style="padding-right: 5px"/>Side bar 3</a>
                </li>
              </ul>
            </div>
          </div>
      </div>
      <div class="col-xs-12 col-sm-8 col-sm-offset-1 report-area">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="row">
              <div class="col-xs-12 col-sm-2">
                <div class="dropdown" ng-show="!loadinga">
                  <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
                    {{dropDownTitle}}
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
                    <li ng-repeat="agent in agentListData">
                      <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-xs-12 col-sm-2">
                <div class="dropdown " ng-show="!loadinga">
                  <button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
                    {{dropDownAllTaskStatusTitle}}
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
                    <li ng-repeat="task in taskStatusListData">
                      <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-xs-12 col-sm-2">
                <div ng-show="!loadinga">
                  <input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
                  ng-blur="" />
                </div>
              </div>
              <div class="col-xs-12 col-sm-4 divGridText" ng-show="!loadinga">
                <input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
                <label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running &lt; </label>
                <input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
              </div>
              <div class="col-xs-12 col-sm-1 divGridText" style="width:9.33%" ng-show="!loadinga" >
                <input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
                <label for="datalabels" style="font-weight:normal;">Task Labels</label>
              </div>
              <div class="col-xs-1 col-sm-1 divGridImage" ng-show="!loadinga">
                <button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

预习：



Answer 2:

你父母的div（列）应设置为0填充和0保证金，以及孩子的应该有你想要的任何填充/保证金。 这防止溢出。

例如，如果你有4列（其等于各25％的宽度），并将它们的甚至一个具有左或像10px的，则第四栏将被推到下一行，因为它们现在超过100右填充％的宽度。

糟糕的例子：

HTML： 

<div class="col-1">
    //content
</div>
<div class="col-2">
    //content
</div>

CSS： 

.col-1, .col-2 { width: 50%; display: inline-block; padding-left: 15px }

上面的代码将有第二列流动，因为那均为15px填充左，你也是在自己的代码中使用的下一行。

好例子：

HTML： 

<div class="col-1">
    <div class="inner-col-1">
        //content
    </div>
</div>
<div class="col-2">
    <div class="inner-col-2">
        //content
    </div>
</div>

CSS： 

.col-1, .col-2 { width: 50%; display: inline-block }
.inner-col-1, .inner-col-2 { padding: 0 15px }

上面的代码将确保您的列在同一行，和内部的内容现在可以使用任何你想要的填充/利润率，因为它们不会影响父母的宽度。



Answer 3:

如果您不需要使用另一个屏幕尺寸的应用程序，你可以尝试对准代理：他容器的权利和复位按钮到容器的左侧。 你可以在设置切缘阴性到该行，将给予您更多的内容的地方。

否则，自举使您能够subdivise每列到12列新的可能性，你可以尝试这样的事： 

<div class="row">
   <div class="col-md-6">
      <!-- you can put here the 4 first elements as you like, on a 12 columns layout -->
   </div>
   <div class="col-md-6">
      <!-- you have again a 12 columns layout for the 3 lasts elements -->
   </div>
</div>

看http://getbootstrap.com/examples/grid/在部分“与两个嵌套的列的两列”为一个视觉例如



Answer 4:

容易，但没有非常有吸引力的解决方案

<span>minutes</span>

PS：我不知道我已经完全明白你的问题



文章来源: Need help in aligning items together in Bootstrap grid layout
标签： html css angularjs twitter-bootstrap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~