作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的页面中有这段代码,可以正常工作,但是当出现大模式窗口时,我的页脚出现在上面的内容上。一定是我在代码中看不到的东西,也许有人可以帮助我?
最佳答案
这里可能的原因是 modal-body
没有获得实际高度,因为它的所有内容都是 float 的。您可以在主体的末尾添加一个 clearfix
类。
然后有人可能会说 “但是 form-control
没有 float ”。是的,但是每个 form-control
中的所有内容都使用 col-X
,即 float:left
。因此,您的 form-control
也没有实际高度。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a class="btn btn-sm btn-info" href="#addVolum" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Adauga volum</a>
<div class="modal fade" id="addVolum">
<div class="modal-dialog">
<form action="" method="post" role="form" class="form-horizotal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">Adaugare volum nou</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="loc" class="cotrol-label col-sm-2">Localitate</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="loc" id="loc" placeholder="Localitate">
</div>
<label for="siruta" class="control-label col-sm-2">Cod SIRUTA</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="siruta" id="siruta" placeholder="SIRUTA">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select name="tip" id="tip" class="form-control">
<option>1 - PFL</option>
<option>2 - PFS</option>
<option>3 - PJL</option>
<option>4 - PJS</option>
</select>
</div>
<label for="vol" class="control-label col-sm-2">Volum</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="vol" id="vol" maxlength="3" placeholder="Volum">
</div>
</div>
<div class="form-group">
<label for="nr_poz" class="control-label col-sm-2">Numar pozitii fizice:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="nr_poz" id="nr_poz" placeholder="Nr. pozitii">
</div>
<label for="nr_pr_poz" class="control-label col-sm-2">Numarul primei pozitii:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="nr_pr_poz" id="nr_pr_poz" placeholder="Nr. pozitie">
</div>
</div>
<! -- Clearfix in the end of the body -->
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Inchide</button>
<button type="submit" class="btn btn-success" name="trimite" value="Creaza volum">Creaza volum
<span class="glyphicon glyphicon-check"></span>
</button>
</div>
</div>
</form>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
关于php - 我模态中的布局未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39204301/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!