引导程序：Col-md-3不是从新行的左边开始

Question

如何使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的高度相同。

谢谢。

Answer 1

如果您不能或不想为每12列应用一行，则可以根据与您的列断点内联的媒体查询清除第n个列：

CSS示例；

@media (min-width: 992px) {
  .col-md-3:nth-child(4n+1) {
    clear: left;
  }
}

您显然不想直接将此规则应用于列，因此请使用唯一选择器来执行此操作。

注意：您还将嵌套的列嵌套在另一列中。要么保留自己的第一个col-md-12 row并开始一个新的col-md-12，要么row在嵌套的内部应用一个新的col-md-12 。请参阅网格嵌套。

工作示例： 在FullPage上运行

@media (min-width: 992px) {
  .col-md-3:nth-child(4n+1) {
    clear: left;
  }
}

@media (min-width: 992px) {
  .item:nth-child(4n+1) {
    clear: left;
  }
}