LoginSignup
3
3

More than 5 years have passed since last update.

Bootstrap3 ナビゲーションバーの折り畳みボタン展開後のレイアウトが揃わない

Last updated at Posted at 2015-04-01

現在Java、Seasar2(SAStrats/S2JDBC)、JSP、PostgreSQLで
DBを使ったWebアプリケーションを作っています。

Bootstrap3でナビゲーションバーを作成したのですが、質問があります。

結論から言うと

ナビゲーションバーの折り畳みボタン展開後のレイアウトが揃えるにはどうしたらいいでしょうか?



具体的に言うと下記画像の横を揃えたいと思っています。
キャプチャ.JPG

jsp
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">弱点リスト</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><s:link href="diary">Practice</s:link></li>
                    <li><s:link href="login/menu">Menu</s:link></li>
                    <li><p class="navbar-text">名前検索</p></li>
                    <li>
                    <s:form action="paging/search/1" styleClass="navbar-form navbar-left">
                    <div class="form-group">
                    <html:text styleId="hoge" property="searchName"
                    styleClass="form-control" style="width:150px;"/>
                    </div>
                    <html:submit value="検索" styleClass="btn btn-info"/>
                    </s:form>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

PracticeやMenuと同じ並びに他の項目もしたいのですが、なかなかその方法がわからずにいます。

他のタグも試した結果、タグが違うことが並びの違いにつながっていると判断し、
bootstrap.cssを見ているのですが、解決までには至っていません。
<input>タグではズレ、<a href>タグでは揃いました。

<li>タグでそのレイアウトを設定し、そのセレクタを最優先で反映させるようにすればいけるのかなとも思っています。


もしわかる方やアドバイスをいただける方がいましたらよろしくお願いします。

3
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3