需要帮助，在引导网格布局调整项目一起 [英] Need help in aligning items together in Bootstrap grid layout

问题描述

我试图调整7项网格布局，使每一个元素固定在它的地位目前我能做到像下面的截图。这里是为同一code plunker （但它一些如何不旁观plunker好）。

I am trying to align 7 items in a grid layout so that each element is fixed in it's place currently I am able to achieve like below screenshot. Here is the plunker for the same code (but some how it does not look good on plunker).

在我目前的状态的问题在于分被包裹到第二行。此外，我怎么能利用来自代理额外的空间：标签区域和重置按钮区域，从而使空间得到利用

The problem in my current state is minutes is wrapped to 2nd line. Also how can I utilise extra space from Agent: label area and Reset button area so that the space gets utilised?

code

<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 类标签？

Or is there a way to keep Agent: label and drop down in same line without giving separate div with col-md-1 class to label?

需要下面的截图类似

推荐答案

右键所以我在尝试解决这个低于，我不会给你的文本同样的身体，因为你可以查看在<一个href=\"http://stackoverflow.com/questions/30480324/how-to-align-bootstrap-dropdown-and-others-together-in-a-grid-layout/30484915?noredirect=1#comment50875948_30484915\">$p$pvious帖子。

Right so my attempts at solving this are below, I'm not going to give you the same body of text because you can review that in the previous post.

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

Here is the completed grid with all the parts you have requested, it's also laid out better. (Its not really device friendly as requested).

我更新的例子正常工作

code：
    
    

Code:

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

preVIEW：

Preview:

这篇关于需要帮助，在引导网格布局调整项目一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！