Bootstrap模态体被挤压到模态页脚
xdo*_*ola 8 html modal-dialog twitter-bootstrap bootstrap-modal
我正在使用Bootstrap创建一些模态.
我正在使用Bootstrap组件解释中div显示的不同.
什么我遇到的是,当我的屏幕尺寸大于x(平均一些未知的值)的DIV包含我modal-body推了(空),并包含在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按钮.
我怎样才能避免挤压身体？
Sea*_*ean 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>