Question

我试图将HTML页面拆分为两部分。

左侧是一周中的某一天，例如星期一，右侧列出了当天出现在左侧的事件。

如果我列出2天或更长时间，我希望左侧日始终显示，直到第二天（左侧）将前一个左侧日推离页面。

例如，

周一活动1
        事件2
        事件3
        ...
周二活动1
        事件2
        事件3
        ...
（上述事件都会出现在页面的乘坐端。格式化会导致我出现问题，但左侧只包含一周中的几天。）

我该怎么做？

这里的JSfiddle目前还不能正常运作。尽管JSfiddle

，全屏工作正常

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset=utf-8>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <title>Fly</title>

        <style>
            #day1-left {
                font-size: 2em;
                background-color: lightblue;
            }

            #day1-right {
                font-size: 2em;
                background-color: lightgreen;
            }

            #day2-left {
                font-size: 2em;
                background-color: lightgreen;
            }

            #day2-right {
                font-size: 2em;
                background-color: lightblue;
            }

            .jumbotron {
                text-align: center;
                background-color: transparent;
            }

            .nav-justified {
                background-color: #eee;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
        </style>
    </head>

    <body>

        <div class="container">

            <!-- The justified navigation menu is meant for single line per list item. Multiple lines will require custom code not provided by Bootstrap. -->
            <div class="masthead">
                <h3 class="text-muted"></h3>

                <nav>
                    <ul class="nav nav-justified">
                        <li class="active">
                            <a href="#">Book</a>
                        </li>
                        <li>
                            <a href="#">Dates</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="jumbotron">
                <h1>Build Itinerary</h1>
            </div>

            <div class="row">
                <div id="day1-left" class="col-xs-4">
                    day 1, left side
                </div>

                <div id="day1-right" class="col-xs-8">
                    day 1, right side

                    <br />
                    1
                    <br />
                    2
                    <br />
                    3
                    <br />
                    4
                    <br />
                    5
                    <br />
                    6
                    <br />
                    7
                    <br />
                    8                   
                    <br />
                    9
                    <br />
                    10
                    <br />
                    11
                    <br />
                    12
                    <br />
                    13                  
                    <br />
                    14
                    <br />
                    15
                    <br />
                    16                  
                    <br />
                    17
                    <br />
                    18
                    <br />
                    19
                    <br />
                    20
                    <br />
                    21

                </div>
            </div>

            <div class="row">
                <div id="day2-left" class="col-xs-4">
                    day 2, left side
                </div>

                <div id="day2-right" class="col-xs-8">
                    day 2, right side

                    <br />
                    1
                    <br />
                    2
                    <br />
                    3
                    <br />
                    4
                    <br />
                    5
                    <br />
                    6
                    <br />
                    7
                    <br />
                    8                   
                    <br />
                    9
                    <br />
                    10
                    <br />
                    11
                    <br />
                    12
                    <br />
                    13                  
                    <br />
                    14
                    <br />
                    15
                    <br />
                    16                  
                    <br />
                    17
                    <br />
                    18
                    <br />
                    19
                    <br />
                    20
                    <br />
                    21

                </div>
            </div>

        </div>

    </body>

</html>

Bootstrap 3分屏问题

0 个答案: