Question

我正在尝试将页面拆分为两个，我想使用bootstrap水平进行：页面的前1/3和其余部分的底部。一旦它拆分底部我想得到4列。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tornado Chat Demo</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ static_url("chat.css") }}" type="text/css">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>    
    <div class="container">
      <div class="row">
        <div id="body">
          <div id="inbox">
            {% for message in messages %}
              {% module Template("message.html", message=message) %}
            {% end %}
          </div>
          <div id="input">
            <form action="/a/message/new" method="post" id="messageform">
              <table>
                <tr>
                  <td><input name="body" id="message" style="width:500px"></td>
                  <td style="padding-left:5px">
                    <input type="submit" value="{{ _("Post") }}">
                    <input type="hidden" name="next" value="{{ request.path }}">
                    {% module xsrf_form_html() %}
                  </td>
                </tr>
              </table>
            </form>
          </div>
        </div>
      </div> <!-- chat textbox closer -->
    <div class="clearifx"></div>
    <div class="row">
        <div class="col-md-3">
          <p> Can I see this </p>
        </div>
        <div class="col-md-3">
          Column2
          <p> Can I see this </p>
        </div>
        <div class="col-md-3">
          <p> Can I see this </p>
          Column3
        </div>
        <div class="col-md-3">
          <p> Can I see this </p>
          Column4
        </div>
    </div>     
    </div><!-- container closer -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="{{ static_url("chat.js") }}" type="text/javascript"></script>   
  </body>
</html>

但表格/输入显示在底部。如何确保输入及其响应保留在页面的顶部，并使用bootstrap将底部拆分为4个相等的列。

Answer 1

col-md-4应为col-md-3，对于顶部的表单，请尝试使用clearfix div，使用css将容器clear-meniu添加到容器中：尝试： css：

.clear-meniu {
    margin-top:60px;
}

html：

<div class="container clear-meniu">
    <div class="row">
        <div id="body">
            <div id="inbox">
              .....
            </div>
            <div id="input">
                <form action="/a/message/new" method="post" id="messageform">
                    <table>
                        <tr>
                            <td>
                                <input name="body" id="message" style="width:500px">
                            </td>
                            <td style="padding-left:5px">
                                <input type="submit" value="Post">
                                <input type="hidden" name="next" value="equest.path">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <!-- chat textbox closer -->
    <div class="clearifx"></div>
    <div class="row">
        <div class="col-md-3">Column1</div>
        <div class="col-md-3">Column2</div>
        <div class="col-md-3">Column3</div>
        <div class="col-md-3">Column4</div>
       </div>
</div>

jsfiddle例如：https://jsfiddle.net/4147mk1t/

Answer 2

我不认为你可以使用bootstrap中的任何东西来完成这个，但是你可以设置两个div绝对定位并将高度设置为第一个33.3333333％，并设置顶部：33.33333333％为第二个div。

使用bootstrap将页面拆分为两个垂直空间

2 个答案: