Question

这里是我的完整资料来源：https://www.zipshare.com/download/eyJhcmNoaXZlSWQiOiI3Y2MzNDc5Ny00NDhmLTQ5YzctYjQ2MS1iYTI5ZTQ0ZmI1ZDYiLCJlbWFpbCI6ImNhdWNhdUBpbmJveC5sdiJ9

我有一个关于编码用现有模板编写的2个列框的问题。

基本上我有一个代表我网站模板的PSD，但是我有点卡在两个容器盒中，其中包含带有信息的底部表格列表（参见截图）。下一栏的框除以2，我认为我可以这样做：

<div class="row">
  <div class="col-md-6 col-md-push-6">.col-md-6 .col-md-push-3</div>
  <div class="col-md-6 col-md-pull-6">.col-md-6 .col-md-pull-6</div>
</div>

我应该从哪里开始？

Answer 1

以下是2列的代码，还可以找到以下示例附加的屏幕截图..

     <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ  </pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa                 
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa</pre>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <pre class="text-justify"> 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 

        </pre>
            </div>
        </div>
    </div>

希望这会有所帮助。请标记已回答/如果此答案可以帮助您解决当前的问题。

快乐学习。

Bootstrap两列中心容器，带圆角

1 个答案: