Question

使用Bootstrap 3我希望获得此调整大小功能：

在较小的屏幕上：

------------
| TitleBar |
------------
| NavBar   |
------------
|          |
| Content  |
|          |
------------

在较大的屏幕上：

----------------------
| NavBar | TitleBar  |
|        |------------
|        |           |
|        | Content   |
|        |           |
----------------------

从以下示例中，我能够得到的最接近的结果是：

----------------------
| NavBar | TitleBar  |
|        |------------
|        |           
|        |    
|        |           
----------------------
         |           |
         | Content   |
         |           |
         -------------



<div id="voterRegistrationContainer" class="container-fluid">
    <div class="row">
        <div id="TitleBar" class="col-lg-10 col-lg-push-2" style="background-color:turquoise">                    
            Voter Registration
        </div>

        <div id="NavBar" class="col-lg-2 col-lg-pull-10" style="background-color:lightblue;"">
            <ul style="font-weight: bold; font-size: x-large; list-style: none">
                <li>Home</li>
                <li>Voters</li>
                <li>Register</li>
                <li>Elections</li>
                <li>Reports</li>
                <li>Admin</li>
                <li>Log Out</li>
            </ul>
        </div>                   

        <div id="Content" class="col-lg-10 col-lg-push-2" style="background-color:lavender;">
            This is where the content goes
        </div>
    </div>
</div>

Answer 1

使用Bootstrap执行此操作的一种方法是使用pull-right类，因为您的＆＃34; nav＆＃34;更高的是你的＆＃34;标题＆＃34;，Bootstrap自然会漂浮＆＃34; nav＆＃34;向左转。因此，您可以使用pull-right来保留＆＃34;标题＆＃34;和＆＃34;内容＆＃34;在右边。同样，这可以在假设下运行＆＃34; nav＆＃34;比你的＆＃34;标题高＃34; ...

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-10 pull-right">
          Voter Registration
      </div>
      <div class="col-xs-12 col-md-2">
        <ul style="font-weight: bold; font-size: x-large; list-style: none">
            <li>Home</li>
            <li>Voters</li>
            <li>Register</li>
            <li>Elections</li>
            <li>Reports</li>
            <li>Admin</li>
            <li>Log Out</li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-10 pull-right">
          This is where the content goes
      </div>
   </div>  
</div>

http://codeply.com/go/nlZB5NufX0

Answer 2

这是正确的结构：

<div id="voterRegistrationContainer" class="container-fluid">

    <div id="NavBar" class="col-lg-6 col-md-12 col-xs-12" style="background-color:lightblue;"">
            <nav class="navbar navbar-default" role="navigation">
              <!-- 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-ex1-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="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </nav>
        </div>    


        <div id="TitleBar" class="col-lg-6 col-md-12 col-xs-12" style="background-color:turquoise">                    
            <div class="row">
            <div class="col-md-12">
                Title Bar
            </div>
            <div class="col-md-12"></div>
                Content
            </div>
        </div>    
</div>

Answer 3

我认为在这样的事情

<div class="col-xs-12 visible-xs">TitleBar</div>
<div class="col-xs-12 col-sm-6">NavBar</div>
<div class="col-xs-12 col-sm-6">
    <div class="row>
        <div class="col-sm-12 hidden-xs">TitleBar</div>
        <div class="col-sm-12">Content</div>
    </div>
</div>

列调整大小顺序

3 个答案: