需要帮助在Bootstrap网格布局

Question

我正在尝试在网格布局中对齐7个项目，以便每个元素都固定在它的位置，目前我能够实现如下截图。以下是相同代码的plunker（但有些内容在plunker上看起来不太好。）

我当前状态的问题是分钟被包装到第二行。另外，我如何利用代理标签区域和重置按钮区域的额外空间，以便利用空间？

代码

<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

您的父div（列）应设置为0填充和0边距，并且子项应具有您想要的任何填充/边距。这可以防止溢出。

例如，如果你有4列（每个等于25％的宽度），甚至其中一列的左侧或右侧填充类似10px，那么第4列将被推到下一行，因为它们现在是超过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 2

如果您不需要在其他屏幕尺寸上使用该应用程序，则可以尝试将代理程序与其容器右侧和容器左侧的重置按钮对齐。你可以设置行的负边距，这样可以为你的内容提供更多的位置。

否则，bootstrap使您可以将每列细分为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 3

是的，所以我尝试解决这个问题的方法如下，我不打算给你同样的文本，因为你可以在previous post.

中查看

Here是已完成的网格，包含您要求的所有部分，它的布局也更好。 （根据要求它并不是真正的设备友好）。

我更新了示例以正常工作

代码：          

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

简单但没有非常有吸引力的解决方案

<span>minutes</span>

PS：我不确定我是否完全理解你的问题