1

ブートストラップを学習していますが、応答性とサイズ変更に少し問題があります。

私はこれらの2つの要素を持っています:

ここに画像の説明を入力

ウィンドウのサイズを変更したり、iPad/iPhone または一部の画面サイズでウィンドウを表示したりすると、スパンがオーバーラップするときに問題が発生します。

ここに画像の説明を入力

十分なスクイーズの後、オーバーラップせずにとるべき位置に最終的に再配置されます。

ここに画像の説明を入力

私のウェブプログラミング初心者のため、おそらく何かが足りないのでしょう。

これが私のコードです：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="<?php echo base_url() ?>assets/css/bootstrap.css" rel="stylesheet">

    <meta charset="utf-8">

    <style type="text/css">

        body {
            background-color: #f5f5f5;
            font: 13px/20px normal Helvetica, Arial, sans-serif;
            color: #4F5155;
        }

        #aux{
            margin: 40px;
            height: 100%;
            padding-top: 40px;
        }

        #body{
            background-color: #fff;
        }

        .containerList{ border:2px solid #ccc; width:100%; height: 100px; }


    </style>
    <link href="<?php echo base_url() ?>assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>


    <div id="aux">
        <div id="wrap">
            <div id="body" class="well">
                <div class="row-fluid">
                    <div class="span3">
                        <textarea id="limitedtextarea" name="limitedtextarea" rows="5" cols="40"></textarea><br>
                    </div>
                    <div id="otherPartFormId" class="span9" >
                        <div id="otherPartForm">
                            <div class="containerList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="<?php echo base_url() ?>assets/js/bootstrap.min.js"></script>
</body>
</html>
4

1 に答える 1

5

aの幅は、デフォルト<textarea>での数によって定義さcols=""れます。width: 100px;colsの数に加えて、CSSを介して値を設定することで、その幅を強制できます。CSSで定義されたwidthは、colsの数をオーバーライドします。

.row-fluidただし、この場合、コンテナで示されているように、流体グリッドに基づいて幅を適用する必要があります。したがって、.span12クラスを次の<textarea>ように適用する必要があります。

デモ（jsfiddle）

<div class="row-fluid">
    <div class="span3">
        <textarea class="span12" id="limitedtextarea" name="limitedtextarea" rows="5" cols="40"></textarea><br>
    </div>
    <div id="otherPartFormId" class="span9" >
        <div id="otherPartForm">
            <div class="containerList"></div>
        </div>
    </div>
</div>
于 2013-01-26T14:31:41.710 に答える