0

ブートストラップにドロップダウンがありますが、その中にあるフォームを中央に配置する方法がわかりません。

これが私のコードです。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a 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>
      </a>
      <a class="brand" href="#">Testing, 123</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <div class="dropdown-menu">
              <form accept-charset="UTF-8" action="/sessions" method="post">
                <fieldset class='textbox login'>
                  <label id='js-username'>
                    <span>Username</span>
                    <input autocomplete="on" id="username" name="username" type="text" size="20px"/>
                  </label>
                  <label id='password'>
                    <span>Password</span>
                    <input id="userpassword" name="userpassword" type="password" />
                  </label>
                </fieldset>
                <fieldset class='subchk'>
                  <input name="commit" type="submit" value="Log In" />
                </fieldset>
              </form>
            </div>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

フォームに合わせて css のドロップダウンの幅を調整しましたが、ドロップダウン内でフォームを中央に配置する方法がわかりません。

4

3 に答える 3

1

CSS を確認しないと、これが機能することを確認するのは困難ですが、次のことを試してください。

.dropdown-menu form {
width: *insert form width here in pixels*;
margin: 0 auto;
}

この回答は、クラスのドロップダウンを含む li がフォームよりも水平方向に大きく、フォームをその中の中央に配置しようとしていることを前提としています。このメソッドを使用して何かを水平方向に中央揃えにするには、幅を固定し、幅を親要素 (この場合はクラス ドロップダウンの li) よりも小さくする必要があります。

追加するために編集されました：私はそれに答えた後まで、この質問がどれだけ古いかわかりませんでした..

于 2013-05-25T18:48:07.487 に答える
0

センタータグを使用すると役立つ場合があります

    <center>  </center>


    <div class="dropdown-menu">
        <center>
          <form accept-charset="UTF-8" action="/sessions" method="post">

         .......

          </form>
         </center>
于 2012-04-09T17:00:32.300 に答える
0

次のように、いくつかのパディングを使用してクラスを作成し、それをフォーム タグに追加するだけです。

CSS

.wrap {
    padding:15px;
}

HTML

<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form>

デモ: http://jsfiddle.net/a52UY/

于 2012-04-09T21:55:43.750 に答える