让Bootstrap列跨越到另一行

时间：2017-07-13 11:16:50

标签： css twitter-bootstrap css3

我试图让Bot Controls div跨越Stream Information div，基本上填充屏幕截图中的红线。我一直在谷歌搜索几个小时，我找不到任何东西。任何帮助将不胜感激。

我正在使用的代码如下。我目前正在使用Bootstrap 3.3.7。

<!-- Panel content -->
<div class="row">
    <!-- Left section -->
    <section class="col-lg-7">
        <div class="row">
            <!-- Twitch chat box -->
            <div class="col-lg-6">       
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Twitch Chat</h3>
                    </div>

                    <!-- Box content -->
                    <div class="box-body" style="padding: 0px;">
                        <div id="chat-box" class="chat" />
                        <!-- Load chat -->
                        <script>
                            //$('#chat-box').html('<iframe class="chat" frameborder="0" scrolling="no" src="https://twitch.tv/' + getChannelName() + '/chat">');
                        </script>
                    </div>
                </div>
            </div>

            <!-- Recent event box -->
            <div class="col-lg-6">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Recent Events</h3>
                    </div>

                    <form role="form">
                        <!-- Box content -->
                        <div class="box-body event-box">

                        </div>
                    </form>
                </div>
            </div>

            <!-- Bot control box -->
            <div class="col-lg-6" style="">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Bot Controls</h3>
                    </div>

                    <form role="form">
                        <!-- Box content -->
                        <div class="box-body">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Right section -->
    <section class="col-lg-5">
        <!-- Stream information box -->
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Stream Information</h3>
            </div>

            <form role="form">
                <!-- Box content -->
                <div class="box-body">
                    <!-- Stream Title Input -->
                    <div class="form-group">
                        <label>Title</label>           
                        <input type="text" class="form-control" placeholder="Stream title." data-toggle="tooltip" title="The current stream title.">
                    </div>

                    <!-- Stream Game Input -->
                    <div class="form-group">
                        <label>Game</label>           
                        <input type="text" class="form-control" placeholder="Stream game." data-toggle="tooltip" title="The current stream game.">
                    </div>
                </div>

                <!-- Footer of the box -->
                <div class="box-footer">
                    <button type="button" class="btn btn-primary pull-right">Update</button>
                </div>
            </form>
        </div>
    </section>
</div>

2 个答案:

答案 0 :(得分：0)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Panel content -->
<div class="row">
    <!-- Left section -->
    <section class="col-lg-7">
        <div class="row">
            <!-- Twitch chat box -->
            <div class="col-lg-6">       
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Twitch Chat</h3>
                    </div>

                    <!-- Box content -->
                    <div class="box-body" style="padding: 0px;">
                        <div id="chat-box" class="chat" />
                        <!-- Load chat -->
                        <script>
                            //$('#chat-box').html('<iframe class="chat" frameborder="0" scrolling="no" src="https://twitch.tv/' + getChannelName() + '/chat">');
                        </script>
                    </div>
                </div>
            </div>

            <!-- Recent event box -->
            <div class="col-lg-6">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Recent Events</h3>
                    </div>

                    <form role="form">
                        <!-- Box content -->
                        <div class="box-body event-box">

                        </div>
                    </form>
                </div>
            </div>

          
        </div>
    </section>

    <!-- Right section -->
    <section class="col-lg-5">
        <!-- Stream information box -->
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Stream Information</h3>
            </div>

            <form role="form">
                <!-- Box content -->
                <div class="box-body">
                    <!-- Stream Title Input -->
                    <div class="form-group">
                        <label>Title</label>           
                        <input type="text" class="form-control" placeholder="Stream title." data-toggle="tooltip" title="The current stream title.">
                    </div>

                    <!-- Stream Game Input -->
                    <div class="form-group">
                        <label>Game</label>           
                        <input type="text" class="form-control" placeholder="Stream game." data-toggle="tooltip" title="The current stream game.">
                    </div>
                </div>

                <!-- Footer of the box -->
                <div class="box-footer">
                    <button type="button" class="btn btn-primary pull-right">Update</button>
                </div>
            </form>
        </div>


          <!-- Bot control box -->
            <div class="col-lg-6" style="">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Bot Controls</h3>
                    </div>

                    <form role="form">
                        <!-- Box content -->
                        <div class="box-body">

                        </div>
                    </form>
                </div>
            </div>


            
    </section>
</div>

答案 1 :(得分：0)

有这个

<div class="row">
<!-- Left section -->
<section class="col-lg-12">
    <div class="row">
        <!-- Twitch chat box -->
        <div class="col-lg-6">       
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Twitch Chat</h3>
                </div>

                <!-- Box content -->
                <div class="box-body" style="padding: 0px;">
                    <div id="chat-box" class="chat" />
                    <!-- Load chat -->
                    <script>
                        //$('#chat-box').html('<iframe class="chat" frameborder="0" scrolling="no" src="https://twitch.tv/' + getChannelName() + '/chat">');
                    </script>
                </div>
            </div>
        </div>

        <!-- Recent event box -->
        <div class="col-lg-6">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Recent Events</h3>
                </div>

                <form role="form">
                    <!-- Box content -->
                    <div class="box-body event-box">

                    </div>
                </form>
            </div>
        </div>

        <!-- Stream Information -->
        <div class="col-lg-6">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Stream Information</h3>
                </div>

                <form role="form">
                    <!-- Box content -->
                    <div class="box-body">
                        <!-- Stream Title Input -->
                        <div class="form-group">
                            <label>Title</label>           
                            <input type="text" class="form-control" placeholder="Stream title." data-toggle="tooltip" title="The current stream title.">
                        </div>

                        <!-- Stream Game Input -->
                        <div class="form-group">
                            <label>Game</label>           
                            <input type="text" class="form-control" placeholder="Stream game." data-toggle="tooltip" title="The current stream game.">
                        </div>
                    </div>

                    <!-- Footer of the box -->
                    <div class="box-footer">
                        <button type="button" class="btn btn-primary pull-right">Update</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
        <!-- Bot control box -->
        <div class="col-lg-6" style="">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Bot Controls</h3>
                </div>

                <form role="form">
                    <!-- Box content -->
                    <div class="box-body">

                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Right section -->
<section class="col-lg-5">
    <!-- Stream information box -->

    <!-- Bot control box -->
    <div class="col-lg-6" style="">
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Bot Controls</h3>
            </div>

            <form role="form">
                <!-- Box content -->
                <div class="box-body">

                </div>
            </form>
        </div>
    </div>
</section>

相关问题
最新问题