Question

我试图获得以下页面外观：picture。到目前为止，我将表单类设置为容器，作为该组的子项，为整个表单设置一行div，并将其作为我希望在其中创建表单组的两个col-md-6 div的子项。

我的目标是让一些输入显示在左侧，一些输入显示在右侧。然而到目前为止似乎没有像我预期的那样移动我的HTML。有人可以提供快速代码如何正确组织div？

我的代码（不介意php它只是Codeigniter中的帮手）：

<div class="admin-box">
<h3>Title</h3>
<?php echo form_open_multipart($this->uri->uri_string(), array('class' =>" container", 'id'=>"ajax-upload")); ?>
<fieldset>

<div class="row">
    <div class="form-group col-md-6">

        <div class="control-group <?php echo form_error('name') ? 'error' : ''; ?>">
            <?php echo form_label('Name', array('class' => 'control-label')); ?>
            <div class='controls'>
                <input id='athletes_name' type='text' name='athletes_name' maxlength="255" value="" />
                <span class='help-inline'><?php echo form_error('name'); ?></span>
            </div>
        </div>

    </div>

    <div class="form-group col-md-6">

        <div class="control-group <?php echo form_error('name') ? 'error' : ''; ?>">
            <?php echo form_label('Name', array('class' => 'control-label')); ?>
            <div class='controls'>
                <input id='athletes_name' type='text' name='athletes_name' maxlength="255" value="" />
                <span class='help-inline'><?php echo form_error('name'); ?></span>
            </div>
        </div>

    </div>

</div>

Answer 1

<div class="admin-box container">
<h3>Title</h3>
<?php echo form_open_multipart($this->uri->uri_string(), array('class' =>" container", 'id'=>"ajax-upload")); ?>
<fieldset>

<div class="row">
    <div class="form-group col-md-6">

        <div class="control-group <?php echo form_error('name') ? 'error' : ''; ?>">
            <?php echo form_label('Name', array('class' => 'control-label')); ?>
            <div class='controls'>
                <input id='athletes_name' type='text' name='athletes_name' maxlength="255" value="" />
                <span class='help-inline'><?php echo form_error('name'); ?></span>
            </div>
        </div>

    </div>

    <div class="form-group col-md-6">

        <div class="control-group <?php echo form_error('name') ? 'error' : ''; ?>">
            <?php echo form_label('Name', array('class' => 'control-label')); ?>
            <div class='controls'>
                <input id='athletes_name' type='text' name='athletes_name' maxlength="255" value="" />
                <span class='help-inline'><?php echo form_error('name'); ?></span>
            </div>
        </div>

    </div>

</div>
</fieldset>
</div>

Answer 2

请改用最小的列定义col-xs-6。网格行为将始终水平显示。

默认情况下，col-md-6会在（屏幕）宽度小于992像素的设备上显示彼此之间的列，并在上方水平显示。

Bootstrap表格分为2列

2 个答案: