css - Bootstrap : Col-md-3 Not starting from left on new line

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>

如何让它像实际的 Bootstrap 网格一样工作，以及如何使每个列的高度相同。

谢谢。

Answer 1

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

示例 CSS；

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

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

注意:您还在另一列中嵌套了列。要么将第一个 col-md-12 保留在它自己的 row 中，然后开始一个新的，要么在嵌套的 row 中应用一个新的 row。参见 Grid Nesting .

工作示例:在整页运行

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

<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 &amp; 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>