自举模型

Question

I have a drop-down list which fetch list details from db table and list generated with fetched details. 我有一个下拉列表，可从数据库表中获取列表详细信息，并使用获取的详细信息生成列表。 Now the issue is this list is too long. 现在的问题是此列表太长。 This was my previous code. 这是我以前的代码。

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

This is how my list then display 这就是我的列表显示的方式

As I mentioned before this list has more than 36 items and its not user friendly. 正如我之前提到的，该列表有36多个项目，并且不友好。 So that I have add a bootstrap model and code updated as below. 这样，我就添加了一个引导程序模型和如下更新的代码。

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

This is the bootstrap model 这是引导程序模型

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

After this I get the expected output. 之后，我得到了预期的输出。 Meant that all list items display in a model box. 意味着所有列表项都显示在模型框中。 But after clicking model box button 但是单击模型框按钮后

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

And I pres Esc or click somewhere else to hide the model box again. 然后我按Esc键或单击其他位置以再次隐藏模型框。 It gets hide.And now it starts to start problems. 它被藏起来了，现在开始出现问题了。

Problem 01 问题01

All the content in the web page shift to left side with approximately 10px . 网页中的所有内容向左侧移动约10px 。 And then there is a 10px white space 然后有一个10px空白

Problem 02 问题02

When I click list all button again it just blur the screen but I cant see the model. 当我再次单击列出所有按钮时，它只是模糊了屏幕，但我看不到模型。

But when I press Esc or click somewhere else and then click list all button then model box appear with item list. 但是，当我按Esc键或单击其他位置，然后单击“ 列出所有按钮”，然后出现带有项目列表的模型框。 When I click esc again it began to shift web page again back to left side and then I click list all button it just get blur and began to shift web page again back to left .So this happens repeatably. 当我再次单击esc时，它开始将网页再次移回左侧，然后单击列出所有按钮，它变得模糊并开始将网页再次移回左侧。因此，这种情况反复发生。 So could anyone please help me to solve this.I know this question is little bit long but I hope someone will show me the place where this error occurs. 所以有人可以帮我解决这个问题。我知道这个问题有点长，但我希望有人能告诉我发生此错误的地方。 Thanks 谢谢

Answer 1

Try this. 尝试这个。

<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