我正在使用 Bootstrap，并且在 .container 中有两种形式。为什么第二个 PayPal 表单显示在表单区域之外？
HTML
作家的幽会 - 作家表格
<link type="text/css" href="css/writers.css" rel="stylesheet" />
<style>
body {padding: 0 20px;}
.limited-offer {
background-color: white;
padding: 3px;
margin-bottom: 12px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<img id="img-writers" src="#" alt="images" />
<div class="col-md-12">
<form id="form-writers" method="post" class="form-horizontal well pull-left">
<h1>Writers</h1>
<div class="form-group">
<label for="title" class="col-lg-3 control-label">Title</label>
<div class="col-lg-9">
<input type="text" class="form-control" required id="title" name="title" autofocus="true" placeholder="Title" />
</div>
</div>
<div class="form-group">
<label for="form-type" class="col-lg-3 control-label">Type of work</label>
<div class="col-lg-9">
<select class="form-control" required id="form-type" name="form-type"></select>
</div>
</div>
<div class="form-group">
<label for="genre" class="control-label col-lg-3">Genre</label>
<div class="col-lg-9">
<select id="genre" name="genre" class="form-control" required></select>
</div>
</div>
<div class="form-group">
<label for="nbr-pages" class="control-label col-lg-3">Number Pages</label>
<div class="col-lg-9">
<input type="number" id="nbr-pages" name="nbr-pages" class="form-control" required placeholder="Pages" />
</div>
</div>
<div id="tips">The objective of a synopsis or query letter is to entice enablers into requesting your manuscript.
It must be concise and to the point and of course very well written. One page is preferred and no more than 3 pages will be accepted.
<a href="uploads/ron/3997524697.pdf" target="_blank">Sample Query Letter</a>
</div>
<p id="file-warning" class="thumbnail">Your synopsis/query letter must be a PDF file.
<a target="_blank" href="https://www.freepdfconvert.com/" target="_blank">Free file conversion to PDF.</a>
</p>
<div id="upload-container" tabindex="0">
<a id="file-upload" class="btn btn-custom-primary btn-file btn-block text-xs-center" role="button">Choose PDF to Upload
<br/><div id="filename" class="btn-block" style="color: #fff">No file chosen</div>
</a>
<input type="file" id="file2upload" style="display: none">
</div><br/>
<div class="form-group">
<!-- <button type="submit" id="writers-submit" class="btn btn-custom-success btn-block m-t-8">Submit</button>-->
</div>
<div class="limited-offer">For a limited time, writer submissions will cost <span style="color: #f00; font-weight:bold">$20.00</span> to offset screening and editing costs and to promote quality synopsises and query letters. We reserve the right to change this policy without notice.</div>
<!-- <form id="form-paypal" name="form-paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return ajaxSubmit()">-->
<input id="userid" name="userid" type="hidden" />
<input id="filesize-limit" name="filesize-limit" type="hidden" value="150000" />
</form>
</div> <!-- col-md-12 -->
<div class="col-md-12">
<form id="form-paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8MEQLAJ8WKG2L">
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="paypal" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div> <!-- col-md-12 -->
</div> <!-- row -->
</div> <!-- container -->
最佳答案
您应该将每个表单包装在一个类为 col-xx-x 的 div 中；像这样的东西:
<div class="container">
<div class="row">
<div class="col-md-x>
# your first form here
</div>
<div class="col-md-x>
# your second form here
</div>
</div>
</div>
请注意 x在 col-md-x考虑到 yp 想要给每列多少空间，必须用 1 到 12 之间的整数替换。
此外，删除 <div>您用来包装 Paypal 表单并将其替换为 <div class="col-md-x>如上所示。
检查 bootstrap grid docs了解更多信息。
关于twitter-bootstrap - 为什么第二种形式显示在 ot Bootstrap 容器区域之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38817995/