Bootstrap：Col-md-3不在新行的左侧开始
如何让col-md-3从左边开始新行。看起来它根据文字大小在列下自动拟合。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</section>
如何让它像实际的自举网格一样工作，以及如何使每个col的高度相同。
感谢。
7 个答案:
答案 0 :(得分：4)
如果您不能或不想为每12个列应用一行，那么您可以根据与列断点内联的媒体查询清除每个第n列：
CSS示例;
@media (min-width: 992px) {
.col-md-3:nth-child(4n+1) {
clear: left;
}
}
您显然不希望将此规则直接应用于列，因此请使用唯一选择器执行此操作。
注意：您也是另一列内的嵌套列。将第一个col-md-12保留在它自己的row中并开始一个新的或在嵌套的row中应用新的@media (min-width: 992px) {
.item:nth-child(4n+1) {
clear: left;
}
}。请参阅Grid Nesting。
工作示例： 在FullPage上运行
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
</div>
</div>
<div class="row">
<div class="col-md-3 item">
<h2>1</h2>
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3 item">
<h2>2</h2>
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3 item">
<h2>3</h2>
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3 item">
<h2>4</h2>
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
<div class="col-md-3 item">
<h2>5</h2>
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3 item">
<h2>6</h2>
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3 item">
<h2>7</h2>
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3 item">
<h2>8</h2>
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
<div class="col-md-3 item">
<h2>9</h2>
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3 item">
<h2>10</h2>
<h4>Culture understanding</h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</section>html
答案 1 :(得分：1)
所有Bootstrap网格列必须包含在
中.row。
由于网格列应该为单个水平块添加最多十二个，因此您的代码结构应如下所示：
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="row">
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</div>
</section>
答案 2 :(得分：1)
如果在HTML场景中，如果开发人员使用循环，则上述答案都是正确的，那么可能会出现此问题。
此解决方案如下：
<div id="mysection">
<div class="container">
<div class="row">
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
</div>
</div>
</div>
Add CSS:
.equal-column{min-height:300px;}
根据你的div添加最小高度是最好的解决方案，如果有第n个col-md-3
答案 3 :(得分：0)
在col-md-3之前使用 <section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="row">
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div> </div>
<div class="row">
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</div>
</section>
，如下面的代码
#include<stdio.h>
int main()
{
char ch;
int i;
scanf("%c", &i);/* i know this must be reversed for next input but I want to know the impact of this code if we use scanf type char for integer data type*/
scanf("%d", &ch);
printf("%c %d", ch, i);
return 0;
}
答案 4 :(得分：0)
如果这些段落的顺序不同，我建议如下：
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
</div>
这样，该列中有四列和n行。
希望这有帮助。
答案 5 :(得分：0)
Bootstrap网格视图始终使用12列作为总计。
首先;创建一个行（）。然后，添加所需数量的列（具有相应.col- - 类的标记）。请注意，.col- - 中的数字应始终为每行添加最多12个。如果列数超过12，则div位于具有最大高度的div旁边。如果所有的高度都相同，那么它就会出现在下一行。
所以基本上你需要将dom排成行，每行需要12列。
答案 6 :(得分：0)
Bootstrap网格系统包括行和列。首先，你需要了解它。为了便于理解，将其可视化为表结构，除了表结构之外，它还具有响应性。因此，您希望从左侧开始列的集合，然后您需要使用 import UIKit
class ViewController: UIViewController {
var pippa: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
let pippaPicture = UIImage(named: "user")
let s = pippaPicture?.size
let width = view.frame.width
let height = (width/(s?.width)!) * (s?.height)!
pippa = UIImageView(frame:CGRect(x:0, y:0, width:width, height:height))
pippa.image = pippaPicture
print(s!, width, height)
pippa.layer.borderWidth = 5
pippa.layer.borderColor = UIColor.red.cgColor
view.addSubview(pippa)
}
}
或row类附加它们。
在代码中，您有10个clearfix div部分。 Bootstrap是12列网格系统，从你的代码中通常它不会按你的意愿工作。你需要在12列网格中划分你的屏幕，但你没有在你的代码中完成。
根据您的指导原则：
col-md-3在上面的代码中，我将屏幕划分为4 * 3列。即4列大小为3,4 * 3 = 12（12格系统）
如果您想与h4标记对齐，则可以使用<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Some Detail</h4>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
</section>
代替clearfix类。 row删除了浮动广告。
我希望你能有所了解。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？