Question

我正在尝试使两个div在桌面的同一行中出现，并且在移动视图中在另一个行的下面出现。但是它在桌面视图和移动视图中都显示在同一行中。当我尝试使用col-xs- *实现相同目的时，它不起作用。我正在使用引导程序4。

<section class="pb_section pt-0 pb-0" id="section-contact">
      <div class="d-flex">
        <div class="pb_half py-5">
          <div class="row justify-content-center mb-5">
            <div class="col-md-10 text-center">
              <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
            </div>
          </div>
          <div class="row justify-content-md-center">
            <div class="col-md-7">
              <form action="#">
                <div class="row">
                  <div class="col-md">
                    <div class="form-group">
                      <label for="name">Name</label>
                      <input type="text" class="form-control p-3 rounded-0" id="name">
                    </div>
                  </div>
                  <div class="col-md">
                    <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control p-3 rounded-0" id="email">
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="message">Message</label>
                  <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
                </div>
                <div class="form-group">
                  <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="pb_half" id="map">

        </div>
      </div>

    </section>

Answer 1

似乎是堆栈溢出编辑器的某些问题。您可以尝试运行小提琴“ https://jsfiddle.net/1w02ngym/5/”吗？代码的问题是您必须将列结构与“ pb_half” div一起使用。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">


  <section class="pb_section pt-0 pb-0" id="section-contact">
    <div class="row">
      <div class="pb_half py-5 col-lg-6">
        <div class="row justify-content-center mb-5">
          <div class="col-md-10 text-center">
            <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
          </div>
        </div>
        <div class="row justify-content-md-center">
          <div class="col-md-7">
            <form action="#">
              <div class="row">
                <div class="col-md">
                  <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control p-3 rounded-0" id="name">
                  </div>
                </div>
                <div class="col-md">
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control p-3 rounded-0" id="email">
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="message">Message</label>
                <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
              </div>
              <div class="form-group">
                <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="pb_half col-lg-6" id="map">
        <h1>
          This is Map
        </h1>
      </div>
    </div>

  </section>
</div>

还原，如果还有其他问题

Answer 2

<section class="pb_section p-5" id="section-contact">
        <div class="row justify-content-center mb-5">
            <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-7">
                <form action="#">
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control p-3 rounded-0" id="name">
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" class="form-control p-3 rounded-0" id="email">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
                    </div>
                </form>
            </div>
        </div>
    </section>

移动和台式机上的div相同

2 个答案: