span in modal - Twitter Bootstrap 2

Question

I want to use span structure in modal view but when I use . row , . row-fluid or span s in modal it overflow modal div.

<div id="login_register_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!-- Header -->
    <div class="modal-header"> </div>

    <!-- body -->
    <div style="color:black;" class="modal-body">

    <!-- I want to use here 2 times span6 in .row div like this but spans overflow -->

      <div class="row">

        <div class="span-6"> left content</div>
        <div class="span-6"> right content</div>

      </div>
    </div>

    <!--footer -->
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

if this is not impossible in bootstrap how can i divide modal two equal part?

Answer 1

how can i divide modal two equal part ?

Tried to implement 2 parts inside the modal and hide one of them through jQuery. TB modal is nothing special just some piece of html.

You can customize it whatever way you want.

but when I use .row, .row-fluid or spans in modal it overflow modal div.

Do you use fixed width or Height. If you have row or .row-fluid then you need to put your content (html code) inside that div. it will not take more space.

inside TB if you have define .row and use spanx in the div then it will be shown in left:30 something. Maybe that is causing the issue. You can remove the left,right manually by writing custom stylesheet.