Bootstrap：列無法正常工作。然後我想要彼此相鄰

Question

我的頁面正在顯示彼此頂部的列，但我希望它們彼此相鄰。在檢查引導程序提供的內容時，我發現添加了padding-left：15px。我試着玩弄它，似乎可以理解正在發生的事情。 >。 <

這裏是我的代碼有

body { 
 
    padding-top: 70px; 
 
} 
 

 
.jumbotron { 
 
    margin-top: -14px; 
 
} 
 

 
.primary-content { 
 
    margin-top: 8em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.footer { 
 
    padding-top: 4rem; 
 
    padding-bottom: 4rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future, 
 
     to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p> 
 

 
     <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly 
 
     special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence 
 
     established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p> 
 

 
     <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="card mb-5 col-md-6"> 
 
    <div class="row"> 
 
     <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap"> 
 
     <div class="card-body"> 
 
     <h4 class="card-title">Mission Statement</h4> 
 
     <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We believe 
 
      strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <h4>CIMI Core Values</h4> 
 
    <div class="card mb-5 col-md-3"> 
 
    <div class="row"> 
 
     <ul class="list-group list-group-flush"> 
 
     <li class="list-group-item">Inclusion</li> 
 
     <li class="list-group-item">Integrity</li> 
 
     <li class="list-group-item">Determination</li> 
 
     <li class="list-group-item">Patience</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

根據所述引導網格系統 使用所有在短短1 <div>正如你希望他們在單列章節與row類 。

body { 
 
    padding-top: 70px; 
 
} 
 

 
.jumbotron { 
 
    margin-top: -14px; 
 
} 
 

 
.primary-content { 
 
    margin-top: 8em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.footer { 
 
    padding-top: 4rem; 
 
    padding-bottom: 4rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future, 
 
     to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p> 
 

 
     <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly 
 
     special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence 
 
     established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p> 
 

 
     <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap"> 
 
     <div class="card-body"> 
 
     <h4 class="card-title">Mission Statement</h4> 
 
     <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We believe 
 
      strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-3"> 
 
     <h4>CIMI Core Values</h4> 
 

 
     <ul class="list-group list-group-flush"> 
 
     <li class="list-group-item">Inclusion</li> 
 
     <li class="list-group-item">Integrity</li> 
 
     <li class="list-group-item">Determination</li> 
 
     <li class="list-group-item">Patience</li> 
 
     </ul> 
 
    </div> 
 
    </div>

Answer 2

的問題是，您已關閉row格設置立即顯示第一列後。您應該在最後的div後關閉該行。希望這是你正在尋找的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-3"> 
 
\t \t \t <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative 
 
\t \t \t \t for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women 
 
\t \t \t \t with a vision for their future, to build confidence and motivation through running, accomplishment and 
 
\t \t \t \t in turn benefiting from the health and exercise.</p> 
 

 
\t \t \t <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with 
 
\t \t \t \t schools and athletic associations to promote health, education, self-esteem and inspiration for women 
 
\t \t \t \t of all ages. Our goal is to sponsor yearly special events, providing training and educational programs, 
 
\t \t \t \t supporting health and exercise opportunities for girls and women with an emphasis on running activities 
 
\t \t \t \t and providing related training and equipment. With our younger participants, confidence established at 
 
\t \t \t \t an early age can be applied to all aspects of their lives, particularly in schools for bright futures. 
 
\t \t \t \t All this is offered free of any charge to our participants.</p> 
 

 
\t \t \t <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who 
 
\t \t \t \t meet quarterly to set goals and continue to move this cause forward.</p> 
 
\t \t </div> 
 

 
\t \t <div class="card mb-5 col-md-6"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap"> 
 
\t \t \t \t <div class="card-body"> 
 
\t \t \t \t \t <h4 class="card-title">Mission Statement</h4> 
 
\t \t \t \t \t <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation 
 
\t \t \t \t \t \t through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through 
 
\t \t \t \t \t \t this community and confidence is built. We believe strongly that all people have many different 
 
\t \t \t \t \t \t abilities and strengths that when nurtured can create beautiful things.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <h4>CIMI Core Values</h4> 
 
\t \t <div class="card mb-5 col-md-3"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <ul class="list-group list-group-flush"> 
 
\t \t \t \t \t <li class="list-group-item">Inclusion</li> 
 
\t \t \t \t \t <li class="list-group-item">Integrity</li> 
 
\t \t \t \t \t <li class="list-group-item">Determination</li> 
 
\t \t \t \t \t <li class="list-group-item">Patience</li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 3

的問題是，您關閉了row顯示第一column後格設置立即。在最後一個div後，應關閉排

此外，在同一div作爲列組合卡可能會導致問題，所以我隔那些過於

body { 
 
    padding-top: 70px; 
 
} 
 

 
.jumbotron { 
 
    margin-top: -14px; 
 
} 
 

 
.primary-content { 
 
    margin-top: 8em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.footer { 
 
    padding-top: 4rem; 
 
    padding-bottom: 4rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> 
 
     <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future, 
 
     to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p> 
 

 
     <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly 
 
     special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence 
 
     established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p> 
 

 
     <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="card mb-5"> 
 
     <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap"> 
 
     <div class="card-body"> 
 
      <h4 class="card-title">Mission Statement</h4> 
 
      <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We 
 
      believe strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-md-3"> 
 
     <h4>CIMI Core Values</h4> 
 
     <div class="card mb-5"> 
 
     <ul class="list-group list-group-flush"> 
 
      <li class="list-group-item">Inclusion</li> 
 
      <li class="list-group-item">Integrity</li> 
 
      <li class="list-group-item">Determination</li> 
 
      <li class="list-group-item">Patience</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div>