Bootstrap模态体内联stye无法正常工作
我的bootrsap模式不能正常工作当我给按钮时身体部分被切割，甚至文本框的宽度没有减少，你可以帮我解决它，我甚至想要这个引导程序模态不会出现在页面的中心。
检查我的代码：
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet"name="orderid" id="exampleOrderId1" >
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence" >
</div>
<span style="float:right;"><button type="submit" class=" btn btn-primary ">Track</button></span>
</form>
</div>
</div>
</div>
</div>
</div>
提前致谢!!
5 个答案:
答案 0 :(得分：1)
修复了按钮不适合的问题。模态也在屏幕的中心。查看下面的代码段。
编辑：模式现在也垂直“居中”。
希望这有帮助！
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="top:calc(50% - 170px)">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet" name="orderid" id="exampleOrderId1">
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence">
</div>
<div style="text-align: right">
<span><button type="submit" class=" btn btn-primary ">Track</button></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
使用class = modal-body在div之后用class = modal-footer创建新的div并将按钮html移入其中。
E.g。
<div class="modal-footer">
<span class="pull-right"><button type="submit" class=" btn btn-primary">Track</button></span>
</div>
答案 2 :(得分：0)
我建议您删除style="float: right;"并将div元素设为Bootstrap-Class .pull-right。 （http://getbootstrap.com/css/#helper-classes-floats）
此外，您需要添加一个带有clearfix的元素。必须将此类.clearfix添加到div的父元素：form（http://getbootstrap.com/css/#helper-classes-clearfix）
通过使用那些Bootstrap-plugins，不会出现任何问题。
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs clearfix" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet"name="orderid" id="exampleOrderId1" >
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence" >
</div>
<div class="pull-right">
<span><button type="submit" class=" btn btn-primary ">Track</button></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
不幸的是，Bootstrap不允许您将模式放在其他位置。但是您可以从.modal-dialog元素设置左/右边距：
.modal-dialog {
margin: 30px 0;
margin-left: 30px;
}
如果您希望模式更大或更小，请使用以下类：modal-lg表示大号，modal-sm表示小号
如果你需要垂直中心，请使用：
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade"id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs clearfix" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet"name="orderid" id="exampleOrderId1" >
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence" >
</div>
<div class="pull-right">
<span><button type="submit" class=" btn btn-primary ">Track</button></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
.modal-dialog { position: absolute; top: 50%; transform: translateX(-50%); width: 100%; max-width: 600px }
</style>
这使用了现代的CSS Transform，它更灵活，然后硬编码位置。当你使用position：relative时，你必须设置width和max-width（来自bootstrap页面的值）
答案 3 :(得分：0)
因为你正在使用自助模式。
非常简单。只需在表单后添加<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet"name="orderid" id="exampleOrderId1" >
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence" >
</div>
<span style="float:right;"><button type="submit" class=" btn btn-primary ">Track</button></span>
</form>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>，如图所示。
likes_words.on('value', snapshot => {
value_of_likes = snapshot.val()
});
答案 4 :(得分：0)
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<a href="" data-toggle="modal" data-target="#myModal">CHECK</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="float:left;width:100%;">
<!-- Modal content-->
<div class="modal-content" style="float:left;width:100%;">
<div class="modal-body" style="background-image: url('assets/images/banners/cat-banner-1.jpg');float:left;width:100%;">
<p> SHS Wallet </p>
<form class="register-form outer-top-xs" role="form" method="post" action="order-details.php">
<div class="form-group">
<input type="text" class="form-control unicase-form-control text-input" width="10px" placeholder="Enter the amount to be added in the wallet"name="orderid" id="exampleOrderId1" >
</div>
<div class="form-group">
<input type="email" class="form-control unicase-form-control text-input" name="email" placeholder="Enter the Email ID for future refrence" >
</div>
<div style="float:right;"><button type="submit" class=" btn btn-primary ">Track</button></div>
</form>
</div>
</div>
</div>
</div>
</div>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？