自举模型

Question

我有一个下拉列表，可从数据库表中获取列表详细信息，并使用获取的详细信息生成列表。 现在的问题是此列表太长。 这是我以前的代码。

<div class="col-md-3">
      <!-- list menu start -->
           <div class="list-menu hidden-sm hidden-xs">
                <div class="list-heading">
                     <h2>all lists</h2>
                </div>
                   <div class="list-menu hidden-menu">
                       {!! $lists['tree'] !!}
                   </div>
           </div>
      <!-- list menu end -->

这就是我的列表显示的方式

正如我之前提到的，该列表有36多个项目，并且不友好。 这样，我就添加了一个引导程序模型和如下更新的代码。

  <div class="row">
                    <div class="col-md-3">
                        <!-- list menu start -->
                        <div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >
                            <div class="list-heading">
                                <h2>all lists</h2>
                            </div>

                        </div>
                        <!-- list menu end -->
                    </div>
                    <div class="col-md-9">

这是引导程序模型

 <!-- Modal -->
<div class="modal fade" id="exampleModalLong"  role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
  <div class="modal-dialog" role="document">      
        <div class="catagory-list-menu hidden-menu">
            {!! $categories['tree'] !!}
        </div>
    </div>
  </div>

之后，我得到了预期的输出。 意味着所有列表项都显示在模型框中。 但是单击模型框按钮后

 <div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >

然后我按Esc键或单击其他位置以再次隐藏模型框。 它被藏起来了，现在开始出现问题了。

问题01

网页中的所有内容向左侧移动约10px 。 然后有一个10px空白

问题02

当我再次单击列出所有按钮时，它只是模糊了屏幕，但我看不到模型。

但是，当我按Esc键或单击其他位置，然后单击“ 列出所有按钮”，然后出现带有项目列表的模型框。 当我再次单击esc时，它开始将网页再次移回左侧，然后单击列出所有按钮，它变得模糊并开始将网页再次移回左侧。因此，这种情况反复发生。 所以有人可以帮我解决这个问题。我知道这个问题有点长，但我希望有人能告诉我发生此错误的地方。 谢谢

Answer 1

尝试这个。

<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
  </head>

  <div class="container">
    <div class="row">
      <h2>Bootstrap-select example</h2>
      <p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a></p>
      <hr />
    </div>

    <div class="row-fluid">
      <select class="selectpicker" data-show-subtext="true" data-live-search="true">
        <option data-subtext="Rep California">Tom Foolery</option>
        <option data-subtext="Sen California">Bill Gordon</option>
        <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
        <option data-subtext="Rep Alabama">Mario Flores</option>
        <option data-subtext="Rep Alaska">Don Young</option>
        <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
      </select>
      <span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>

自举模型

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-01 10:31:15

自举模型

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-01 10:31:15

解决方案1
1 已采纳 2019-07-01 10:31:15