0

私はTwitter Bootstrapが初めてで、これを理解できません..次のコードがあります。画面の幅を変更すると (つまり、モバイルの幅に)、実際に行を折りたたんで互いに下に配置するにはどうすればよいですか? 現時点では、行を一緒に押しつぶすだけで、行を互いの下にドロップしません。役立つコードをいただければ幸いです。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>
<h1>Hello, world!</h1>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>



    <div class="row-fluid">
        <div class="span4" style="overflow:auto">Column 1</div>
        <div class="span4">Column 2</div>
    <div class="span4">Column 3</div>
    </div>

<div class="row-fluid">
        <div class="span3">Column 1</div>
        <div class="span3">Column 2</div>
    <div class="span3">Column 3</div>
    <div class="span3">Column 4</div>
    </div>

<div class="row-fluid">
        <div class="span12">Column 1</div>
    </div>

</body>
</html>
4

2 に答える 2

1

これは、CSS でメディア クエリのスタイルを設定することによって実現されます。

@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 480px) and (max-width: 767px) {}

これらの CSS スニペット内の要素のスタイルを設定して、目的の効果を得ます。

例えば; たとえば、モバイルビューで要素を互いの下にドロップするには:

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #divid {
  width: 100%;
  min-height: 100px;
  float: left;
  position: relative; }
  background: black; 
}
于 2013-03-19T08:05:11.073 に答える
0

スタイルシートのインポートの順序と、それらがフォルダーに存在することを確認してください。レスポンシブはメインファイルの後にインポートする必要があります

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
于 2013-05-14T09:02:54.563 に答える