Bootstrap css 表禁用 Chrome 中的输入

Question

我正在使用引导程序基础 css 来设置我的表格样式。但是，在 Chrome 上，我无法在表格中输入任何内容。我也将其更改为复选框，但没有任何效果。

我已经在 Safari 和移动设备上尝试过，并且输入有效。我没有使用任何额外的 CSS。我的基础 css 是主题 SBAdmin2，我使用的是 bootstrap css 3.3.7。

我使用 CodeIgniter 作为我的框架。我希望有人可以提供帮助或有人以前遇到过这种情况。

这是我的代码

<div class="row">
    <div class="row col-md-6">
        <?php echo form_open_multipart('Events/Two/Search');?>
            <div class="input-group">
                <input type="text" name="search" id="search" class="form-control" placeholder="Search e.g. John Cena">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">
                       <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </span>
            </div>
        <?php echo form_close(); ?>
    </div>
    <div class="row col-md-12 table-responsive">
        <?php echo form_open_multipart('Events/Two/Search');?>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td></td>
                    <td>Name</td>
                    <td>Email</td>
                    <td>Phone Number</td>
                    <td>Address</td>
                </tr>
            </thead>
            <tbody>

                <?php 
                    if(!empty($datatable)){
                        foreach ($datatable as $data){

                ?>
                    <tr>
                        <td><input type="email" name="email" id="email"/></td>
                        <td><?php echo $data->first_name." ".$data->last_name; ?></td>
                        <td><?php echo $data->email; ?></td>
                        <td><?php echo $data->phone_number; ?></td>
                        <td><?php echo $data->address;?></td>
                    </tr>
                <?php 
                    }
                }
                ?>
            </tbody>
        </table>
        <?php echo form_close(); ?>
    </div>
    <div class="row col-lg-12">
        <div class="pull-right">
            <?php echo $links; ?>
        </div>
    </div>
    <div class="row col-lg-12">
        <div class="pull-right">
            <input type="submit" class="btn btn-primary" value="Next">
        </div>
    </div>
</div>

Answer 1

普通屏幕需要使用 col-md-* 类 col-sm-* 用于平板电脑屏幕和 col-xs-*

<div class="row">
<div class="col-sm-12">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Very Small</th>
                <th>Very Small</th>
                <th>Very Small</th>
                <th>Large</th>
                <th>Small</th>
                <th>Medium</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-sm-1">
                    <input class="col-sm-12" placeholder="col-sm-1" />
                </td>
                <td class="col-sm-1">
                    <input class="col-sm-12" placeholder="col-sm-1" />
                </td>
                <td class="col-sm-1">
                    <input class="col-sm-12" placeholder="col-sm-1" />
                </td>
                <td class="col-sm-4">
                    <input class="col-sm-12" placeholder="col-sm-4" />
                </td>
                <td class="col-sm-2">
                    <input class="col-sm-12" placeholder="col-sm-2" />
                </td>
                <td class="col-sm-3">
                    <input class="col-sm-12" placeholder="col-sm-3" />
                </td>
            </tr>
        </tbody>
    </table>
</div>