在手机和台式机中，div会出现同样的情况

Question

我试图让两个div在桌面上同一行出现，另一个在移动视图中出现在另一行之下。但它在桌面和移动视图中都出现在同一行中。当我尝试使用col-xs- *来实现相同的功能时，它无法正常工作。我正在使用bootstrap 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

<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>

Answer 2

看起来像堆栈溢出编辑器的一些问题。你可以尝试运行小提琴“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>

如果您有任何其他问题，请恢复