我可以在bootsrap行中添加boostrap面板吗？

Question

我在一个包含很长输入列表的页面上使用bootstrap。要使用以下列布局（也使用ejs / javascript）将其居中在页面上：

<%  
    var col1 = 'col-md-2';  //space left 
    var col2 = 'col-md-3';  //label 
    var col3 = 'col-md-4';  //input 
    var col4 = 'col-md-4';  //space right 
%>

要在输入和单独的选项控件中添加某种顺序，我将它们与面板类分组，如下所示：

<div class="panel panel-default">
    <div class='row'>
        <div class='<%= col1 %>'></div>
        <div class='<%= col2 %>'>First Name</div>
        <div class='<%= col3 %>'>
            <input type='text'  name='_firstname' value='' /> 
        </div>
        <div class='<%= col4 %>'></div>
    </div>
    <div class='row'>
        <div class='<%= col1 %>'></div>
        <div class='<%= col2 %>'>Last Name</div>
        <div class='<%= col3 %>'>
            <input type='text'  name='_lastname' value='' /> 
        </div>
        <div class='<%= col4 %>'></div>
    </div>
</div>

逻辑上，面板的线环绕着col1-col4。但是，无论如何我可以将外部切出来，只需在col2-col3周围应用盒子，而不会弄乱所有漂亮的bootstrap调整大小功能？

我不知道如何使用直接引导来完成它，但我不熟悉css所以想在这里查看和/或看看是否有任何其他想法我怎么解决这个。