我正在使用Bootstrap创建一些模态。
我正在使用Bootstrap component explanation中显示的不同div
。
我所遇到的是,当我的屏幕尺寸大于x(意味着某个未知值)时,包含我的modal-body
的div被向上推(空),而div包含我的modal-footer
吸收modal-body
上的元素。
这是一张解释我在说什么的图片:
编码相同,只需更改屏幕尺寸。
<HTML>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id='modal' class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<h4 class='modal-title'>Change name</h4>
</div>
<div class='modal-body'>
<form id='formModal' method='post' action='giocatori.php'>
<div class='form-group col-md-12'>
<label>Name</label>
<input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
<button type='button' class='btn btn-primary'>Salva</button>
</div>
</div>
</div>
</body>
</HTML>
如果您想体验挤压模式,请运行代码段然后按Full page
按钮。
如何避免挤压身体?
答案 0 :(得分:15)
Bootstrap的列类旨在与行类一起使用,而不是与其他元素/类结合使用。行和列类一起工作以确保浮动被清除。试试这个:
<HTML>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id='modal' class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
<h4 class='modal-title'>Change name</h4>
</div>
<div class='modal-body'>
<form id='formModal' method='post' action='giocatori.php'>
<!-- use a row class -->
<div class='row'>
<!-- keep the col class by itself -->
<div class='col-md-4'>
<div class='form-group'>
<label>Name</label>
<input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
</div>
</div>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
<button type='button' class='btn btn-primary'>Salva</button>
</div>
</div>
</div>
</body>
</HTML>
&#13;