0

TwitterBootstrapスキャフォールディングページの.well内にいくつかのdivを配置するのに少し問題があります。少し前から取り組んでいますが、CSSの知識は限られており、ほとんど自分で学んだだけです。

http://jsfiddle.net/hEvwR/

次のようになります。

モックアップ

これはもともと翡翠にありますが、質問のために変換しました。このページのベストプラクティスについても提案があればいいのですが。

4

1 に答える 1

1

http://jsfiddle.net/hEvwR/2/を参照してください

変化する

    <div class="span5">
      <p><strong>Enter Your Mobile Phone Number</strong>
      </p>
      <input id="features-demo-number" type="text" placeholder="555-123-4567" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/>
      <div class="pull-left">
        <p><strong>(Optional) Enter a MLS identification number for a more personalized demo</strong>
        </p>
        <input id="features-demo-mls-number" type="text" placeholder="123456789" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/><br/>
        <button id="features-demo-customer" class="btn btn-primary btn-large">Send <strong>Buyer</strong> Notification <i class="icon-share-alt icon-white"></i>
        </button>
      </div>
      <div class="pull-right">
        <video id="video-preview" controls="controls" preload="auto" poster="images/poster.png" width="250" height="140" data-setup="{}" class="video-js vjs-default-skin">
          <source src="https://s3.amazonaws.com/textoad.com/assets/textoad.mp4" type="video/mp4">
          </source>
        </video><a href="/signup" style="margin-top:20px;margin-left:0px;font-size:18px;padding-left:20px;padding-right:20px;text-align:center;" class="btn btn-large btn-primary">Sign Up Now</a>
      </div>
    </div>

に

    <div class="span5">
      <div class="pull-left">
        <p><strong>Enter Your Mobile Phone Number</strong></p>
        <input id="features-demo-number" type="text" placeholder="555-123-4567" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/>
        <p><strong>(Optional) Enter a MLS identification number for a more personalized demo</strong>
        </p>
        <input id="features-demo-mls-number" type="text" placeholder="123456789" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/><br/>
        <button id="features-demo-customer" class="btn btn-primary btn-large">Send <strong>Buyer</strong> Notification <i class="icon-share-alt icon-white"></i>
        </button>
      </div>
      <div class="pull-right">
        <video id="video-preview" controls="controls" preload="auto" poster="images/poster.png" height="140" data-setup="{}" class="video-js vjs-default-skin">
          <source src="https://s3.amazonaws.com/textoad.com/assets/textoad.mp4" type="video/mp4">
          </source>
        </video><a href="/signup" style="margin-top:20px;margin-left:0px;font-size:18px;padding-left:20px;padding-right:20px;text-align:center;" class="btn btn-large btn-primary">Sign Up Now</a>
      </div>
    </div>

そして追加

.span5{width:auto;}
#video-preview{width:210px!important;}
.span5>.pull-left{width:210px}
于 2012-09-05T19:35:59.913 に答える