为引导按钮组设置Codeigniter的form_submit样式

I am Developing a Blog Application with Codeigniter. Its style depends on Bootstrap 3. I created a table to show articles of users. i also created a row for taking actions on that article. I created a form submit buttom using form_submit() Function of codeigniter form helper. But as i said its a button group so i also have two more button (one before it and one after it). I want to style this form submit as a button of button group but now it is looking as whole new button. Here's my Code. This is my Whole View.

<?php
include_once('admin_header.php');
?>
<div class="container">
<div class="row">
    <?= anchor('admin/store_article', 'Add Post', ["class"=>"btn btn-primary btn-large pull-right"]); ?>
</div>
<?php
if ($feedback = $this->session->flashdata('feedback')) :
$feedback_class = $this->session->flashdata('feedback_class'); ?>
<br>
<br>
<br>
<div class="alert alert-dismissible <?= $feedback_class ?>">
  <?= $feedback ?>
</div>
<?php endif; ?>
<div class="table-responsive">
<table class="table table-striped table-hover ">
  <thead>
    <tr>
      <th>Sr NO.</th>
      <th>Article</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
  <?php
  if(count($articles)):
    $count = $this->uri->segment(3, 0);
      foreach ($articles as $article):
      ?>
    <tr>
      <td><?= ++$count ?></td>
      <td>
      <?= $article->title; ?>
      </td>
      <td>
      <div class="btn-group">
      <?= anchor("plogi/article/{$article->id}", 'View', ['class'=>'btn btn-success']) ?>
      <?= anchor("admin/edit_article/{$article->id}", "Edit", ["class"=>"btn btn-primary"]); ?>
      <?= 
       form_open('admin/delete_article', ['class'=>'form-horizontal danger']);
          echo form_hidden('article_id', $article->id);
          echo form_Submit(['type'=>'submit', 'value'=>'Delete', 'class'=>'btn btn-danger']);
          echo form_close();
       ?> <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    More <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Re Share</a></li>
      <li><a href="#">Purge From Cache</a></li>
    </ul>
  </div>
</div></td>
    </tr>
    <?php
    endforeach;
    else: 
    echo "<tr><td colspan='3'>No Records Found</td></tr>";  
  endif;

    ?>
  </tbody>
</table> 
<?= $this->pagination->create_links(); ?>

</div>
</div>
<?php
include_once('admin_footer.php');
?>

This is My Model.

public function delete_article($article_id)
    {
        return $this->db->delete('articles', ['id'=> $article_id]);
    }

And this is my controller

public function delete_article()
    {
        $article_id = $this->input->post('article_id');
        $this->load->model('articlesmodel', 'articles');
        if ($this->articles->delete_article($article_id)) {
                $this->session->set_flashdata('feedback', 'Post Deleted Successfully');
                $this->session->set_flashdata('feedback_class', 'alert-success');
            } else {
                $this->session->set_flashdata('feedback', 'Failed To Delete Post, Please Try Again');
                $this->session->set_flashdata('feedback_class', 'alert-danger');
            }
            return redirect('admin/dashboard');
    }

Now it is Looking like Now it is looking like that

I'm assuming you want the button group to hold the Edit, Delete, and More buttons except the View button.

EDIT: Adjusted the HTML to group all buttons.


The code

<?php
include_once('admin_header.php');
?>
    <div class="container">
        <div class="row">
            <?= anchor('admin/store_article', 'Add Post', ["class"=>"btn btn-primary btn-large pull-right"]); ?>
        </div>
        <?php
        if ($feedback = $this->session->flashdata('feedback')) :
            $feedback_class = $this->session->flashdata('feedback_class'); ?>
            <br>
            <br>
            <br>
            <div class="alert alert-dismissible <?= $feedback_class ?>">
                <?= $feedback ?>
            </div>
        <?php endif; ?>
        <div class="table-responsive">
            <table class="table table-striped table-hover ">
                <thead>
                <tr>
                    <th>Sr NO.</th>
                    <th>Article</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <?php
                if(count($articles)):
                    $count = $this->uri->segment(3, 0);
                    foreach ($articles as $article):
                        ?>
                        <tr>
                            <td><?= ++$count ?></td>
                            <td>
                                <?= $article->title; ?>
                            </td>
                            <td>
                                <form id="<?= $article->id ?>" action="<?= site_url("admin/delete_article") ?>">
                                    <input type="hidden" name="article_id" value="<?= $article->id ?>">
                                </form>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-info">View</a>
                                    <a class="btn btn-primary" href="<?= site_url("admin/edit_article/{$article->id}") ?>">Edit</a>
                                    <button type="submit" form="<?= $article->id ?>" value="" class="btn btn-danger">Delete</button>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        More <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Re Share</a></li>
                                        <li><a href="#">Purge From Cache</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <?php
                    endforeach;
                else:
                    echo "<tr><td colspan='3'>No Records Found</td></tr>";
                endif;

                ?>
                </tbody>
            </table>
            <?= $this->pagination->create_links(); ?>

        </div>
    </div>
<?php
include_once('admin_footer.php');
?>


Things to note

  • I personally try to avoid CodeIgniter's HTML Helpers (especially the form helper). They are not robust enough, and my IDE has issues when opening and closing tags don't match (or when elements that only belong to forms are in form helpers - it assumes it's an error).
  • The form is outside the button group so as not to break bootstrap's css. But the Delete button references the form's id so as to enable the form to be submitted when clicked.


Goodluck!