个人中心
gpt4 book ai didi

javascript - Bootstrap 下拉菜单以动态形式引入错位

转载 作者：行者123 更新时间：2023-11-28 05:14:22 25 4
gpt4 key购买 nike

我正在尝试使用 angular js 的动态搜索表单。在这种表单中，我正在添加基于传递的 json 数据的字段。

<!DOCTYPE html>
<html lang="en" ng-app="app"  ng-init="names=['Jani','Hege','Kai']">
<head >
  <title>ISS Core</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!--angular grids based ependency  -->

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <style>
    .form-horizontal .control-label {

    }

    .form-horizontal .controls {

   } 
   /* Remove the navbar's default margin-bottom and rounded borders */
   .navbar {
    margin-bottom: 0;
    border-radius: 0;
    background-color: #0a4e8f;
  }

  body {
    background-color: #f2f2f2;
    overflow: auto;
  }


  /* Add a gray background color and some padding to the footer */
  footer {
    background-color: #f2f2f2;
    padding: 25px;
  }

  .h2{

    padding: 25px;
    background-color: #0a4e8f;
  }
  .grid {
    width: 100%;
    height: 50vh;
  }

  .my-custom-menu {
    position: absolute;
  }

  .my-custom-menu .ui-grid-menu {
    padding: 0px;
  }

  .my-custom-menu .ui-grid-menu-inner {
    -webkit-box-shadow: none;
    box-shadow: none;
  }



  .rotated {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }

  body {
    padding-top: 50px;
    padding-bottom: 20px;
}
#search h3{background-color: #0a4e8f;color:white;padding-left:25px}


/* Set padding to keep content from hitting the edges */


  .ui-grid-cell { display : table-cell; height: auto !important; overflow:visible; position: static; padding-top: 10px; } 
  .ui-grid-row { display : table-row; height: auto !important; position: static; } 
  .ui-grid-cell-contents{ height: auto !important; white-space: normal; overflow:visible; } 

  </style>
<script type="text/javascript">
  var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);

  app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
    var fakeI18n = function( title ){
      var deferred = $q.defer();
      $interval( function() {
        deferred.resolve( 'col: ' + title );
      }, 1000, 1);
      return deferred.promise;
    };

    $scope.gridOptions = {
      exporterMenuCsv: false,
      enableGridMenu: true,
      gridMenuTitleFilter: fakeI18n,
      columnDefs: [
      { name: 'name' },
      { name: 'gender', enableHiding: false },
      { name: 'company' }
      ],
      gridMenuCustomItems: [
      {
        title: 'Rotate Grid',
        action: function ($event) {
          this.grid.element.toggleClass('rotated');
        },
        order: 210
      }
      ],
      onRegisterApi: function( gridApi ){
        $scope.gridApi = gridApi;

      // interval of zero just to allow the directive to have initialized
      $interval( function() {
        gridApi.core.addToGridMenu( gridApi.grid, [{ title: 'Dynamic item', order: 100}]);
      }, 0, 1);

      gridApi.core.on.columnVisibilityChanged( $scope, function( changedColumn ){
        $scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible };
      });
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });
}]);


</script>

</head>
<body>
  <div class="container-fluid" >
   <div class="row" id="formDetail" style="background-color: #0a4e8f;color:white;padding:5px;height:10%">
     <div class="col-sm-6 col-xs-6 col-lg-6">
      <h3 > Heading 1</h3>
    </div>
    <div class="col-sm-6 col-xs-6 col-lg-6">

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="row" id="search">
    <h3 style="">Heading 2</h3>;

    <form class="form-horizontal blockl">

      <div class="form-group" ng-controller="myCtrl" id="test">

        <div ng-repeat="value in items" ng-switch on="value.type" class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div ng-switch-when="dropdown" >
           <label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-bind="value.label"></label>
           <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
             <div class="dropdown" >


              <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
                <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
                  <li role="presentation" class="divider"></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
                </ul>

              </div> 
            </div> 
          </div>

          <div ng-switch-when="radio">
            <label class="control-label checkbox-inline col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-bind="value.label"></label>
             <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:5px">
              <input type="checkbox"  value="" />
            </div>
          </div>


          <div ng-switch-when="text">
            <label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6">{{value.label}}</label>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:5px">
             <input type="{{value.type}}" class="form-control">
           </div>
         </div>


         <div ng-switch-when="label">
          <label class="control-label col-lg-6 col-md-6 col-sm-6 col-xs-6" >{{value.label}}</label>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 7px">
           <label class="control-label col-sm-2" style="padding-left: 0px">{{value.value}}</label>
         </div>
       </div>

     </div>
   </div>


 </form>
</div>
<div class="row" id="grid"  >  <h3 style="background-color: #0a4e8f;color:white;padding-left:25px">heading 3</h3>

 <div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
 <div ng-if='columnChanged'>
  Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }}
</div>  
<div><p>nand</p></div>    
</div>
</div>

</body>

<script type="text/javascript">
  var app = angular.module('app', []);
  app.controller("myCtrl", function($scope) {
    $scope.items = { 
   ll: {type: 'dropdown', label: 'myDropDown'},
      one: {type: 'text', label: 'Mytext'},

      two: {type: 'text', label: 'Mytext'},

      three: {type: 'text', label: 'Mytext'},


      five: {type: 'text', label: 'Mytext'},
      six: {type: 'text', label: 'Mytext'},
      seven: {type: 'text', label: 'Mytext'},


      eight: {type: 'text', label: 'Mytext'},

      nine: {type: 'text', label: 'Mytext'},
      ten: {type: 'text', label: 'Mytext'},
      e: {type: 'text', label: 'Mytext'},
      b: {type: 'text', label: 'Mytext'},
      a: {type: 'text', label: 'Mytext'},
      q: {type: 'text', label: 'Mytext'},
      w: {type: 'text', label: 'Mytext'},
      i: {type: 'label', label: 'label',value:'labelValue'},
      l: {type: 'dropdown', label: 'myDropDown'},

    };
  });




</script>


</html>

但是当 bootstrap 下拉菜单显示其未对齐表单元素时(它在附加图像中以红色突出显示)。我尝试使用不同的 Bootstrap 类(如“内联表单”等)来解决此问题，但它没有用。任何线索我做错了什么。

enter image description here enter image description here enter image description here

最佳答案

您的列高不相等，这会导致对齐问题。使用以下 CSS 使您的列高度相等，

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row-eq-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

在下面的div中添加row-eq-height类，

<div class="form-group row-eq-height" ng-controller="myCtrl" id="test"> </div>

关于javascript - Bootstrap 下拉菜单以动态形式引入错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39387758/

25 4 0
文章推荐： c++ - 如何调用父类的同名虚函数
文章推荐： javascript - socket.io 基本发出和监听器失败
文章推荐： javascript - 使用嵌套 for 循环创建 HTML 表格
文章推荐： c++ - 从 lldb 中制作 C++ 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com