我無法找到爲什麼我的列堆疊在HTML/CSS（引導）

-1

我目前正在制定一個非常基本的網站，並使用CSS/Bootstap。不過，我無法弄清楚爲什麼我的專欄堆疊在一起。我已經通過Stack Overflow和官方Bootstrap文檔瞭解到，據我所知，它應該應該工作：我正在尋找跨越頁面的「關於我」標題下創建三個相等的列。我無法找到爲什麼我的列堆疊在HTML/CSS（引導）

<!DOCTYPE html> 
<html lang="en"> 
<title>Testing | </title> 

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<!-- Bootstrap Core CSS--> 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
<!-- Google Fonts --> 
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Copse|Cutive|Lora:700|Sanchez|Scope+One|Slabo+27px|Trocchi|Vesper+Libre" rel="stylesheet"> 
<style> 
    header { 
     text-align: center; 
     background: url('sunlightthroughgrass.jpg'); 
     background-size: cover; 
     color: black; 
     width: auto; 
     height: auto; 
    } 
    a { 
     color: white; 
    } 
    h1 { 
     font-family: 'Vesper Libre', serif; 
     font-size: 70px; 
    } 
    img { 
     max-width: 400px; 
     max-height: 400px; 
     margin: 40px 0px 0px 0px; 
     border: 7px solid white; 
     border-radius: 20px; 
     width: auto; 
     height: auto; 
    } 
    ul { 
     text-align: center; 
     padding: 10px; 
     background: rgba(0, 0, 0, 0.5); 
    } 
    li { 
     display: inline; 
     padding: 0px 10px 0px 10px; 
    } 
    <!-- article { 
     max-width: 500px; 
     padding: 20px; 
     margin: 0 auto; 
    } 
    @media (max-width: 500px) { 
     h1 { 
      font-size: 36px; 
      padding: 5px; 
     } 
     li { 
      padding: 5px; 
      display: block; 
     } 
    }--> 
</style> 
</head> 

<body> 
<div class="container-fluid"> 
<header> 
    <img src="robin.jpg"> 
    <h1>Test Person|Testing</h1> 
    <ul class="nav nav-pills"> 
     <li><a href="#">About Me</a> 
     </li> 
     <li><a href="#">Resume</a> 
     </li> 
    </ul> 
</header> 

    <div class="row"> 
     <div class="col-lg-4"> 
      Test Test Test 
      <div class="col-lg-4"> 
       Nother Test 
       <div class="col-lg-4"> 
        Third Nother Test 
       </div> 
      </div> 
     </div> 
    </div> 



    <!-- SCRIPTS GO UNDER HERE --> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
    <!--Anti-Spam--> 
    <script type="text/javascript" src="js/obscure.js"></script>

來源

2017-04-11 Geoff

你嵌套你col-lg-4的div，像這樣做，而不是：

<div class="row"> 
     <div class="col-lg-4"> 
      Test Test Test 
     </div> 
     <div class="col-lg-4"> 
      Third Nother Test 
     </div> 
     <div class="col-lg-4"> 
      Third Nother Test 
     </div> 
    </div>

來源

2017-04-11 00:20:05

薩米爾您好，感謝您的回覆。現在看來如此明顯，你已經說過了。非常感激！ – Geoff

我無法找到爲什麼我的列堆疊在HTML/CSS（引導）

回答

相關問題