html - Boostrap 3.4 - 在两列中排列多个按钮

Question

我正在尝试在 boostrap 3.4 中安排一些按钮。

我设法做到了（可能是运气），这就是它的样子

这是我使用的代码。这个想法是创建行，然后divs在行内创建各种具有适当列宽的行col-xs-N。

<div id="cfd_panel" class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            <a data-toggle="collapse" data-parent="#analysis" href="#collapse2">CFD</a>
        </div>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
        <div class="row">
            <div class="col-xs-6">
                <button type="button" class="btn btn-block btn-default btn-sm" id='create_cfd_domain' onclick='create_cfd_domain_btn()'>
                    Create/Update Domain
                </button>
            </div>
            <div  class="col-xs-3"  style="padding-right: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" onclick='map_to_area_btn()' >
                    Airflow Map
                </button>
            </div>
            <div class="col-xs-3"  style="padding-left: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_btn()' >
                    View
                </button>
            </div>
        </div>

        <div class="row">
            <div  class="col-xs-6">
                <button type="button" class="btn btn-block btn-default btn-sm" id='mesh_cfd_domain' onclick='openfoam_mesh_btn()'>
                    Mesh 
                </button>
            </div>
            <div class="col-xs-3" style="padding-right: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_samples_btn()' >
                    Samples
                </button>
            </div>
            <div  class="col-xs-3" style="padding-left: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" onclick='import_from_aws_btn()' >
                    Import
                </button>
            </div>                                    
        </div>
        <div class="row">
            <div  class="col-xs-3" style="padding-right: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" id='run_cfd_cases' onclick='openfoam_run_btn()'>
                    Run
                </button>
            </div>
            <div  class="col-xs-3" style="padding-left: 1px">
                <button type="button" class="btn btn-block btn-default btn-sm" id='sample_cfd_cases' onclick='openfoam_get_results_btn()' >
                    Sample
                </button>
            </div>
            <div  class="col-xs-6" style="padding-left: 10px; ali">
                <button type="button" class="btn btn-link btn-sm" id='open_cfd_settings' onclick='open_cfd_settings_btn()' >
                    Settings
                </button>

                <button type="button" class="btn btn-link btn-sm" id='open_wind_template' onclick='open_wind_template_btn()' >
                    OFTemplate
                </button>

            </div>
        </div>



    </div>
</div>

我现在正试图以不同的方式重新排列按钮，但我无法通过更改列宽来正确地做到这一点。这就是发生的事情。目标是在同一行和第一列上设置 MESH 和 RUN 按钮。

有正确的方法吗？

标签： htmltwitter-bootstraptwitter-bootstrap-3