Bootstrap Modal Dialog. Can the grid system be used within a modal context?

前端 未结 7 2086
生来不讨喜
生来不讨喜 2020-12-16 11:21

I have a Bootstrap modal dialog for which I want to layout the various labels and inputs. I have tried using row/column classes but they do not appear to do anything. What a

相关标签:
7条回答
  • 2020-12-16 11:59

    Tom Rudge's answer inspired me. You don't need to make the container also be a full-width column itself which Matt Dell pointed out will fail linters.

    Make the container container-fluid instead!

    bootply showing col-md-12 and container-fluid side by side

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Modal with container fluid</h3>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <p>
                                1st col 3
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p>
                                2nd col 3
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p>
                                3rd col 3
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p>
                                4th col 3
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    
    0 讨论(0)
提交回复
热议问题