Question

我有一个模态窗口设置，但是当按下激活它的按钮时，显示的模态被切成两半，like this.在较小的窗口中，模态显示正常。请原谅代码，这有点乱。

<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

<title>OAMK Opinnäytetyöt</title>

<!-- SCROLLS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
    html                    { overflow-y:scroll; }
    body                    { padding-top:50px; }
    #todo-list              { margin-bottom:30px; }


</style>

<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">

    <!-- HEADER AND TODO COUNT -->
    <div class="jumbotron text-center">
        <h1>OAMK Opinnäytetyöt</h1>
    </div>

    <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg text-center" data-toggle="modal" data-target="#myModal">Lisää uusi aihe</button>

    <!-- TODO LIST -->
    <div id="todo-list" class="row">
        <div class="col-sm-10>

            <!-- LOOP OVER THE TODOS IN $scope.todos -->
            <div class="checkbox" ng-repeat="todo in todos">
                <label>
                <h1>
                    <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.aihe }}
                </h1>
                </label>
                <br>
                    {{ todo.kuvaus }}

            </div>

        </div>
    </div>

    <div class="container">


<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">   
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p><!-- FORM TO CREATE TODOS -->
    <div id="todo-form" class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <form>
                <div class="form-group">

                    <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                    <input type="text" maxlength="50" class="form-control input-lg" placeholder="Aihe (max. 50 merkkiä)" ng-model="formData.aihe">
                    <input type="text" maxlength="255"class="form-control input-lg" placeholder="Kuvaus (max. 255 merkkiä)" ng-model="formData.kuvaus">
                </div>

                <!-- createToDo() WILL CREATE NEW TODOS -->
                <button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal" ng-click="createTodo()">Lisää</button>
            </form>
        </div>
    </div></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>
</div>

</div>

 </div>

</body>
</html>

Answer 1

你想用CSS实现什么？没有CSS，你的代码工作得很好！

检查小提琴：https://jsfiddle.net/eoug80b8/

这不是你要找的吗？：P

如果你必须使用你的自定义CSS样式，你至少应该删除这一行：left: -100%;，因为这会弄乱一些东西！

没有特定行https://jsfiddle.net/eoug80b8/1/

的新小提琴

另外：如果你选择最后一个解决方案，你应该重新考虑使用width: 140%;，因为它可能会将关闭按钮移到可见区域之外！

Answer 2

如果有其他人在这个问题上遇到困难，我测试了OP的代码并且遇到了完全相同的问题，但删除了内部模态div的模态对话框类修复了它。在<div class="modal-dialog modal-sm">行上，我删除了模态对话框类，并且右侧不再将模态切成两半。

或者，你可以在下一个div开始之前关闭模态对话框div。

Answer 3

我遇到了同样的问题，我通过添加

解决了这个问题

<div class="modal-dialog modal-sm" style="left:0% !important">

而不是

<div class="modal-dialog modal-sm">

在模态div

中

Bootstrap模态切成两半

3 个答案: