bootstrap 4 响应式表单，包含带有图像的两列部分

Posted 2023-03-05

【中文标题】bootstrap 4 响应式表单，包含带有图像的两列部分

【英文标题】：bootstrap 4 responsive form containing a two-column section with image

【发布时间】：2021-09-02 10:44:54

【问题描述】：

我在一个项目中使用 Bootstrap 4.6。我需要以以下形式显示图像：

图像在一列中，图像的属性（标题等）在第二列中。

我希望显示的表单看起来像这样：

-----------------------------------------------------
|                          Title   ..............    |
|                          Caption ..............    |
|                                                    |
|   Image                                            |
|                                                    |
|                                                    |
|                                                    |
------------------------------------------------------

这是我的表单的 html 标记：

<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Modal Form</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
        </div>

        <form class="tagForm" id="tag-form" action="#" method="post" enctype="multipart/form-data">
            <div class="modal-body">

              <div class="form-group">
                
                  <div class="form-group col-md-6" style="display: inline;">
                      <img src="https://source.unsplash.com/random/200x350" >
                  </div>

                  <div class="form-group col-md-6" style="display: inline;">
                      <label class="text-inline"><input type="text" name="photoTitle">Title</label>
                  </div>
                            
              </div>


                <input type="hidden" id="frm-val" name="frm-val" value="">

                <div class="form-group">
                  <label class="radio-inline"><input type="radio" name="status">Option1 </label>
                  <label class="radio-inline"><input type="radio" name="status">Option2</label>
                </div>

                <div class="form-group">
                  <label for="notes">Notes: </label>
                  <input id="notes" class="form-control" type="textarea"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input id="form-submit" type="submit" class="btn btn-primary" value="Submit">
            </div>
        </form>
    </div>
</div>    

我如何干净利落地（并以响应式方式）在一列中显示图像，并将其属性显示在图像旁边，在图像旁边的另一列中？

【参考方案1】：

看起来您只是缺少一个 BS“行”课程。每当您使用“col”类创建 div 时，您都希望将它们包含在“row”类中。换个方式

<div class="form-group">

到

<div class="form-group row">

如果您也想在右边的 col div 中添加单选按钮和注释，则需要将它们包含在第二个“col”div 中。但我不确定这是基于模型的最终目标。

更多网格示例可在 BS 网站上找到 v4.6： BS v4.6 Grid Layout

【讨论】：

我很尴尬 :p 这是漫长的一天......谢谢

顺便问一下，你知道为什么标签 Title 没有显示标记中指定的 inline 吗？相反，它被包裹在文本输入元素下。