bootstrap codeigniter 表单输入和提交按钮

Posted 2023-03-05

【中文标题】bootstrap codeigniter 表单输入和提交按钮

【英文标题】：bootstrap codeigniter form input and submit button

【发布时间】：2013-07-28 07:15:38

【问题描述】：

我正在尝试使用 bootstrap 和 Codeigniter，但我遇到了一个小问题，我似乎无法弄清楚如何将 3 个简单元素对齐到一行中，因此它们彼此完美对齐。

我希望表单中的 H3 标记、输入字段和提交按钮彼此相邻。我已经在 div 中的 3 个对象上尝试了 span4，然后还尝试了 display:inline，但没有任何效果。我不知道为什么，但是如果我希望它们彼此完美相邻，我只需在其他对象上放置 margin-top: -7px 和其他边距，但这看起来根本不是一个好的方法。请你帮助我好吗 ？ ！

我的代码：

<div class="well">
<h3>My superb h3 tag!</h3>

<?php echo form_open('search/quick_search'); ?>

<?php echo form_error('search_query'); ?>
<?php echo form_input('search_query','','placeholder="Search query"'); ?>

<?php echo form_submit('submit_quick_search','Search','class="btn"'); ?>

<?php echo form_close(); ?>

How does it look

【问题讨论】：

您是否尝试过使用form-inline 作为表单的类？

是的，我这样做了，但它会生成一个丑陋的 url，所以我没有使用它。尽管我不喜欢它的外观（在代码中），但我已经完成了整个事情。

使用 form-inline 如何/为什么会影响 URL？

好吧，我也对此感到困惑，所以我把它忽略了。也许这是我的应用程序中的一些东西，但我不知道。

【参考方案1】：

这就是我一起使用的方式（横版）

<?php echo form_open('search/quick_search', 'class="form-horizontal');?>

<div class="control-group <?php echo form_error('search_query')? 'error' : ''; ?>">
    <label class="control-label" for="search_query">Search Term:</label>
    <div class="controls">
        <?php echo form_input('search_query','','placeholder="Search query"'); ?>
        <span class="help-inline"><?php echo form_error('search_query'); ?></span>
        <span class="help-block"></span>
    </div>
</div>

<div class="form-actions">
    <?php echo form_submit('submit_quick_search', 'Search', 'class="btn"'); ?>
</div>      

<?php echo form_close(); ?>