0

Twitter ブートストラップを使用してサイトを構築しており、レスポンシブな中央揃えのフォーム水平に取り組んでいます...ただし、特定のブラウザ幅で入力フィールドがオーバーフローします。メディアクエリをいじらずにこれを修正する簡単な方法はありますか?おそらくマークアップに何かが欠けていますか? 私は v. 2.3.2 を使用しています。これが私のコード、THE HTML です。

<!DOCTYPE HTML>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="override.css"/>
</head>
<body class="home">
<header class="navbar navbar-static-top push">
    <div class="navbar-inner navfix">
        <div class="container-fluid">
            <a class="brand" href="#">The Limos</a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="nav-collapse collapse">
                <ul class="nav nav-pills pull-right">
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="row-fluid input-wrap">
    <div class="span4"></div>
    <div class="span4 center-wrap">
        <form class="form-horizontal">
            <fieldset>
                <legend>Get Started Today</legend>
                <div class="leftfix">
                    <div class="control-group row-fluid">
                        <label class="control-label">Date/Time</label>
                        <div class="controls">
                            <input type="text" placeholder="Date/Time...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Your Name:</label>
                        <div class="controls">
                            <input type="text" placeholder="Your Name...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Your Email:</label>
                        <div class="controls">
                            <input type="text" placeholder="Your Email...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Phone #:</label>
                        <div class="controls">
                            <input type="text" placeholder="Phone #...">
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label">Zip Code:</label>
                        <div class="controls">
                            <input type="text" placeholder="Zip Code...">
                        </div>
                    </div>
                </div>
                <br />
                <button type="submit" class="btn">Submit</button>
            </fieldset>
        </form><br />
    </div>
    <div class="span4"></div>
</div>
</body>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="js/bootstrap.js"></script>
</html>

オーバーライド CSS:

.right-align {
text-align: right;
}
.inline-block {
display: inline-block;
}
.homelogo {
padding-top: 15px;
padding-left: 20px;
font-size: 26px;
}
.homenav {
padding-top: 15px;
padding-right: 20px;
margin-bottom: 0px !important;
font-size: 16px;
}
.navfix {
background: rgba(0, 0, 0, 0.0);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
zoom: 1;
border-bottom: 0;
}
.home {
background: #000000;
}
.navbar .brand {
text-shadow: 0 1px 0 #333333;
}
.navbar .nav>li>a{
background: #666666;
border-radius: 5px;
color: #000000;
text-shadow: 0 1px 0px #666666;
}
.navbar .nav>li>a:hover {
background: #cccccc;
}
.push {
margin-top: 55px;
}
.input-wrap .center-wrap {
margin-top: 100px;
background: #cccccc;
border: 1px #999999;
border-radius: 5px;
}
.leftfix {
text-align: left;
}
input {
max-width: 100% !important;
}
.form-horizontal > fieldset {
padding: 10px;
}

壊れたレイアウトの画像: 壊れて醜い このままの姿でいてほしい

4

1 に答える 1

1

うーん...正直なところ、Twitter Bootstrap CSS を部分的にオーバーライドする以外に、適切な回避策が見つかりませんでした。問題は、レスポンシブ (フォームが含まれる要素) の幅が、フォーム内のおよび要素.span4のハードコーディングされた幅とマージンを組み合わせたものよりもはるかに小さくなる可能性があることです。<label><input>

これらの要素には代替レイアウトがあり、 の<label>上にスタックがあり、 の<input>中に適切に収まり.span4ます。ただし、この CSS は、メディア クエリによって十分に狭い画面幅に達するまで適用されません。(画面をもっと狭くすると、この変化が見られます。)

これらのスタイルを別の画面幅に適用する別のメディア クエリを作成することもできます (ビューポートがまだかなり広いが、幅が.span4狭すぎる場合)。別ルート。

したがって、オーバーライドする CSS に追加した定義は次のとおりです。

.form-horizontal .control-label{
    text-align:left;
    padding-top: 5px;
    margin-right:20px;
    width:80px;
}
.form-horizontal .controls{
    float:left;
    margin-left: 0;
}

これにより、前述の余分な幅とマージンの多くが削除/上書きされることに気付くでしょう。そのため、フォームの外観が少し異なります (左側の余分なスペースがなくなり、テキストの配置が少し変更されています)。ただし、要素は、ビューポートの狭さではなく、親の狭さに比例して「小さな画面」レイアウトに折りたたまれます。もちろん、デザインの変更が応答性を上回っていると思われる場合は、このソリューションを使用しないでください。

これがあなたが探していたものでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-08-12T18:04:07.800 に答える