需要帮助在Bootstrap网格布局中对齐项目在一起 [英] Need help in aligning items together in Bootstrap grid layout

问题描述

我试图在一个网格布局中的7个项目，以便每个元素都固定在它的地方，目前我能够实现如下面的屏幕截图。这是相同代码的

这里是已完成的网格，包含您请求的所有部分，也是布局更好。

我更新了示例以正常工作

代码：

 < head> 
< script data-require =jquery @ *data-semver =2.1.4src =http://code.jquery.com/jquery-2.1.4.min.js> < / script> 
< script data-require =[e-mail]-semver =1.4.3src =https://code.angularjs.org/1.4.3/angular.js >< / script> 
< script data-require =ui-bootstrap @ *data-semver =0.13.0src =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 =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css /bootstrap.min.css/> 
< link rel =stylesheethref =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 =myAppng-controller =MainController> 
< div class =container-fluid> 
< div class =row> 
< div class =hidden-xs col-sm-2 sidebar> 
< div class =sidebar-navstyle =height：100％！important; min-height：100％！important> 
< div class =navbar navbar-customrole =navigation> 
< ul class =nav recommendation-nav> 
< li class =active> 
< a href =＃/>< img style =padding-right：5px/>侧杆< / a> 
< / li> 
< li> 
< a href =＃/>< img style =padding-right：5px/>侧栏< / a> 
< / li> 
< li> 
< a href =＃/>< img style =padding-right：5px/>侧栏< / a> 
< / li> 
< li> 
< a href =＃/>< img style =padding-right：5px/>侧栏1< / a> 
< / li> 
< li> 
< a href =＃/>< img style =padding-right：5px/>侧栏2< / a> 
< / li> 
< li> 
< a href =＃/>< img style =padding-right：5px/>侧栏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 =dropdownng-show =！loadinga> 
< button class =btn btn-default btn-block dropdown-toggle whiteDropdownng-disabled =loadingstyle =background-color：#fff; border-color：＃C3C3C3type =button id =dropdownMenu1aria-expanded =true> 
 {{dropDownTitle}} 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu scroll-menu navrole =menuaria-labelledby =dropdownMenu1> 
< li ng-repeat =agent in agentListData> 
< a role =menuitemhref =＃ng-click => {{agent}}< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< div class =col-xs-12 col-sm-2> 
< div class =dropdownng-show =！loadinga> 
< button class =btn btn-default btn-block dropdown-toggle whiteDropdownng-disabled =loadingtype =buttonid =dropdownMenu2aria-expanded =true> 
 {{dropDownAllTask​​StatusTitle}} 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu scroll-menu navrole =menuaria-labelledby =dropdownMenu2> 
< li ng-repeat =taskStaskListData中的任务> 
< a role =menuitemhref =＃ng-click => {{task.title}}< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< div class =col-xs-12 col-sm-2> 
< div ng-show =！loadinga> 
< input id =autoCompleteng-model =selectedtypeahead =task.name for task in taskList | filter：$ viewValue | limitTo：20class =form-controltypeahead- select =placeholder =Search Taskstypeahead-focus-first =trueng-disabled =loadingtype =text
 ng-blur =/> 
< / div> 
< / div> 
< div class =col-xs-12 col-sm-4 divGridTextng-show =！loadinga> 
< input ng-model =isCheckedng-click =checkboxClicked（isChecked）ng-disabled =loadingtype =checkbox/& 
< label for =excludeMinutesStepstyle =font-weight：normal>排除正在运行的任务< < / label> 
< input id =excludeMinutesStepmin =0max =10ng-disabled =！isChecked || loadingng-model =excludeValueng-change =size =2 style =width：40pxtype =number/>分钟
< / div> 
< div class =col-xs-12 col-sm-1 divGridTextstyle =width：9.33％ng-show =！loadinga> 
< input id =datalabelsng-model =isLabelShowCheckedng-click =ng-disabled =loadingtype =checkbox/& 
< label for =datalabelsstyle =font-weight：normal;>任务标签< / label> 
< / div> 
< div class =col-xs-1 col-sm-1 divGridImageng-show =！loadinga> 
< button style =margin-left：3pxclass =btn btn-customng-click =>重置< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / body> 
 
< / html> 
  

预览：

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>

Update

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?

Need something like below screenshot

解决方案

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

I updated the example to work correctly

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:

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