缩小保证金而不是形式要素

Question

我的网站使用Bootstrap 3，我刚刚遇到了一个似乎违背其网格系统的任务。

我的页面有两列，主要内容和面板内容。当我减小页面宽度时，主内容面板中的表单元素会缩小。但我想要的是这两个面板之间的差距缩小（直到它们到达下一个断点 - 我正在使用col-xs，col-sm和col-md。

<div class="container-fluid">

    <div class="row" style="height:100%">

        <div class="col-xs-12 col-sm-7 col-md-8">

            <div class="row">

                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">

                    <div>
                        Main Content Header 
                    </div>

                    <form id="my_form" class="form" method="POST">

                        <h2>Enter your Name</h2>

                        <div class="form-group">
                            <label for="fName">First Name</label>
                            <input type="text" class="form-control" id="firstName" maxlength="254" placeholder="" autocomplete="off" data-hint="" name="firstName" required/>
                        </div>

                        <div class="form-group">
                            <label for="lName">Last Name</label>
                            <input type="text" class="form-control" id="lastName" maxlength="254" placeholder="" autocomplete="off" data-hint="" name="lastName" required/>
                        </div>

                        <h2 style="margin-top: 20px">Create a Password</h2>

                        <div class="form-group">
                            <label for="pwd">Password</label>
                            <input type="password" class="form-control" id="password" maxlength="254" placeholder="" autocomplete="off" data-hint="" name="password" required/>
                        </div>

                        <div class="form-group">
                            <label for="pwd">Confirm Password</label>
                            <input type="password" class="form-control" maxlength="254" placeholder="" autocomplete="off" data-hint="" name="password_verification" required/>
                        </div>

                        <div class="form-group" style="padding-bottom:50px">
                            <input type="submit" class="btn btn-block btn-lg btn-primary" id="fb-submit-button" value="Create my account" disabled/>
                        </div>
                    </form>

                </div>

            </div> 

        </div>

        <div class="col-xs-12 col-sm-5 col-md-4">
            <div class="row">
                <div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
                    <span>My Side Content</span>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
                    <span>Item 1</span>
                    <p>
                        asdflkjasdfl;kjasd;flkjasd;lfkjasd;lfkjasd;lfksadf
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
                    <span>Item 2</span>
                    <p>
                        adsflkjasdf;lkajsdf;lkjasdf;lkjasdf;lkjasdf;lkjasdf;lkjsdf
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
                    <span>Item 3</span>
                    <p>
                        Tasdflkjasdf;lkjasdf;lkjasdf;lkjasdf;lkjasd;flkjasd;lfkjasdf
                        <br/>
                    </p>
                </div>
            </div>

        </div>

    </div>

</div>

使用Bootstrap时是否可以进行自定义大小调整？

这是我的小提琴：https://jsfiddle.net/d2ghdpz1/1