Div baris Bootstrap Twitter tidak berfungsi

Saya mencoba membuat dua kolom di situs saya menggunakan Twitter Bootstrap, membagi kelas div baris seperti pada kode di bawah ini.

Masalahnya adalah sintaksisnya tampaknya tidak berfungsi sama di komputer saya dibandingkan di situs dokumentasi. Misalnya, jika saya menyalin sumber halaman contoh maka akan terjadi tampak berbeda secara keseluruhan, kumpulan, dan item menu aktif tidak muncul dengan benar, dan kolom ditempatkan di bawah satu sama lain sebagai paragraf.

Saya juga tidak dapat menemukan petunjuk apa pun dengan inspektur webkit, kode dan struktur file serta pengkodeannya sama dengan situs contoh tutorial.

Ada ide, seseorang?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title comes here</title>
        <link rel="stylesheet" type="text/css" href="/idcss/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 sumber
comment
Versi bootstrap mana yang Anda gunakan?   -  person Daniel Flippance    schedule 20.01.2014
comment
Apakah Anda yakin itu tidak mengalir seperti yang diharapkan, karena ukuran layar yang lebih kecil?   -  person MackieeE    schedule 20.01.2014
comment
Kode Anda tampak bagus bagi saya dalam contoh ini. Mungkin Anda menyalin kode dari situs dokumentasi menggunakan Bootstrap 2 tetapi sebenarnya Anda sendiri yang mengunduh Bootstrap 3.   -  person davidpauljunior    schedule 20.01.2014

Jawaban (2)


arrow_upward
1
arrow_downward

Sepertinya Anda menggunakan Bootstrap versi terbaru (3.X). Yang digunakan pada contoh Anda adalah 2.3.2. Sistem jaringan listrik sepenuhnya dibangun kembali untuk mendukung daya tanggap yang lebih baik.

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

Daripada spanX, Anda harus menggunakan col-xs-X, col-sm-X atau col-md-X atau col-lg-X dengan X jumlah kolom. xs,sm,md dan lg tergantung ukuran layar yang ingin Anda dukung.

person Pierre Maoui    schedule 19.01.2014

arrow_upward
0
arrow_downward

Anda perlu menambahkan kelas lain ke kolom Anda:

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

Pilih bagian md tergantung pada ukuran perangkat yang didukung kode (md sedang, gunakan juga lg untuk desktop besar, sm untuk tablet xs dan ponsel pintar)

Ini berlaku untuk Bootstrap versi v3.0.3

person Daniel Flippance    schedule 19.01.2014
comment
Sepertinya dia menggunakan Bootstrap versi 2.3.2 jadi ini tidak membantu. - person luke2012; 20.01.2014