div แถว Bootstrap ของ Twitter ไม่ทำงาน

ฉันกำลังพยายามสร้างสองคอลัมน์บนไซต์ของฉันโดยใช้ Twitter Bootstrap โดยแบ่งคลาส div ของแถวตามโค้ดด้านล่าง

ปัญหาคือดูเหมือนว่าไวยากรณ์จะทำงานบนคอมพิวเตอร์ของฉันไม่เหมือนกับไซต์เอกสารประกอบ ตัวอย่างเช่น หากฉันคัดลอกแหล่งที่มาของ หน้าตัวอย่าง มันจะ ปรากฏแตกต่างออกไปทั้งหมด พูลและรายการเมนูที่ใช้งานอยู่ไม่ปรากฏอย่างถูกต้อง และคอลัมน์อยู่ใต้กันเป็นย่อหน้า

ฉันไม่พบเบาะแสใด ๆ กับตัวตรวจสอบ webkit เช่นกัน โค้ดและโครงสร้างไฟล์และการเข้ารหัสเหมือนกับของไซต์ตัวอย่างการสอน

มีความคิดบ้างไหม?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title comes here</title>
        <link rel="stylesheet" type="text/css" href="/thcss/bootstrap.css">
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="span4">
                <p>Dummy Text</p>
             </div>

             <div class="span8">
                <p>Dummy Text</p>
                 </div>
            </div>
        </div>
    </body>
</html>

html css twitter-bootstrap row
person user3213271    schedule 19.01.2014    source แหล่งที่มา
comment
คุณใช้บูตสแตรปเวอร์ชันใด   -  person Daniel Flippance    schedule 20.01.2014
comment
คุณแน่ใจหรือว่าไม่ใช่แค่การเรียงซ้อนตามที่คาดไว้เนื่องจากขนาดหน้าจอที่เล็กลง   -  person MackieeE    schedule 20.01.2014
comment
โค้ดของคุณ ดูดีสำหรับฉันในตัวอย่างนี้ เป็นไปได้ว่าคุณกำลังคัดลอกโค้ดจากไซต์เอกสารประกอบโดยใช้ Bootstrap 2 แต่ได้ดาวน์โหลด Bootstrap 3 ด้วยตัวเองจริงๆ   -  person davidpauljunior    schedule 20.01.2014

คำตอบ (2)


arrow_upward
1
arrow_downward

ดูเหมือนว่าคุณกำลังใช้ Bootstrap เวอร์ชันใหม่กว่า (3.X) อันที่ใช้ในตัวอย่างของคุณคือ 2.3.2 ระบบกริดถูกสร้างขึ้นใหม่ทั้งหมดเพื่อรองรับการตอบสนองที่ดียิ่งขึ้น

http://getbootstrap.com/css/#grid-example-basic

แทนที่จะเป็น spanX คุณควรใช้ col-xs-X, col-sm-X หรือ col-md-X หรือ col-lg-X โดยที่ X เป็นจำนวนคอลัมน์ xs,sm,md และ lg ขึ้นอยู่กับขนาดของหน้าจอที่คุณต้องการรองรับ

person Pierre Maoui    schedule 19.01.2014

arrow_upward
0
arrow_downward

คุณต้องเพิ่มคลาสอื่นให้กับคอลัมน์ของคุณ:

<div class="col-md-6">
    <p>Dummy text</p>
</div>

เลือกส่วน md ขึ้นอยู่กับขนาดอุปกรณ์ที่โค้ดรองรับ (md คือขนาดกลาง และใช้ lg สำหรับเดสก์ท็อปขนาดใหญ่ sm สำหรับแท็บเล็ต xs และสมาร์ทโฟน)

สิ่งนี้ใช้กับ Bootstrap เวอร์ชัน v3.0.3

person Daniel Flippance    schedule 19.01.2014
comment
ดูเหมือนว่าเขาใช้ Bootstrap เวอร์ชัน 2.3.2 ดังนั้นสิ่งนี้จึงไม่ช่วยอะไร - person luke2012; 20.01.2014