三行md-8 +一长垂直的md-4 (三行旁边)
<body>此部分应位于所有三行的右侧，为md-4列，垂直于三行的左侧高度。
TEXT <form action="php" class= "form-contact" data-ajax-fail-msg= "Ajax could not set the request" data-all-fields-required-msg="All fields are required" data-success-msg="Email successfully sent." id= "contact-form-agent" method="post" name= "contact-form-agent"> <input name="name" placeholder="Full Name" type="text"> <input name="email" placeholder="E-mail" type="text"> <input name="title" placeholder="Title" type="text"> <input name="company" placeholder="Company" type= "text"> <textarea name="message" placeholder= "Tell us What Keeps You Up At Night"> </textarea> <input class="submit-alt pull-right" type="submit" value="Get Started"> <p class="return-msg"> </p> </form> </div>
上面是提交字段为php输入的代码。下面是表单下的第二张md-4图片.
<div class="col-md-4 onscroll-animate" data-animation= "fadeInUp"> <br> <br> <a href=""><img alt="" height= "190" src="images/assets/video-thumb-A.png" width= "331"></a> <h3>SEE FOR YOURSELF</h3> <br> </div> </div> </div> </section>
本节为md-8格式的三行，完成12行引导列。
<section> <div class="section-content"> <div class="container"> <section id="listings-section"> <div class="section-content"> <div class="section-header onscroll-animate" data-animation="fadeInLeft"> <p>TEXT</p> </div> <div class="row"> <div class="col-md-12"> <div class="profile"> <div class="row"> <div class="col-xs-4"> <div class="profile-img"><img alt= "store-icon" src= "images/icons/store-icon.png"> </div> </div> <div class= "col-xs-8 text-left onscroll-animate" data-animation="fadeInUp"> <h5 class="profile-heading"> </h5> <p> </p> <div class="profile-cotent"> <h3 class= "section-small-heading">TEXT</h3> </div> </div> </div> <!-- .row --> </div> <!-- .profile --> </div> <!-- .col-md-8 --> </div> <!-- .row --> </div> <!-- .section-content --> </section> <div class="section-header onscroll-animate" data-animation= "fadeInLeft"> <p>TEXT</p> </div> <div class="col-md-12"> <div class="profile"> <div class="row"> <div class="col-xs-4"> <div class="profile-img"><img alt="hand-icon" src="images/icons/hand-icon.png"> </div> </div> <div class="col-xs-8 text-left onscroll-animate" data-animation="fadeInUp"> <h5 class="profile-heading"> </h5> <p> </p> <div class="profile-cotent"> <h3 class="section-small-heading">TEXT</h3> </div> </div> </div> <!-- .row --> </div> <!-- .profile --> </div> <!-- .col-md-12 --> <!--AMP SECTION 3--> <div class="section-header onscroll-animate" data-animation= "fadeInLeft"> <p>TEXT</p> </div> <div class="col-md-12"> <div class="profile"> <div class="row"> <div class="col-xs-4"> <div class="profile-img"><img alt="store-icon" src="images/icons/computer-icon.png"> </div> </div> <div class="col-xs-8 text-left onscroll-animate" data-animation="fadeInUp"> <h5 class="profile-heading"> </h5> <div class="profile-cotent"> <h3 class="section-small-heading">TEXT</h3> </div> </div> </div> <!-- .row --> </div> <!-- .profile --> </div> <!-- .col-md-12 --> <div class="col-md-12"> <div class="profile"> <div class="row"> <div class="profile-cotent"> <h3 class="section-small-heading">TEXT</h3> </div> </div> </div> <!-- .row --> </div> <!-- .profile --> </div> <!-- .col-md-12 --> </div> </section> <!-- .col-md-3 --> <!-- .row --> <!-- .container --> <!-- .section-content -->
请帮忙，谢谢。
</body>
</html>回答 1
Stack Overflow用户
发布于 2015-06-24 21:16:53
基本嵌套行应该执行以下操作：
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12"> ... </div>
<div class="col-xs-12"> ... </div>
<div class="col-xs-12"> ... </div>
</div>
</div>
<div class="col-xs-4"> ... </div>
</div>
</div>http://getbootstrap.com/css/#grid-nesting
https://stackoverflow.com/questions/31037086
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号