Question

我使用自动布局列并排放置了两个巨型飞轮，分别位于Bootstrap 1 of 2、2 of 2中。当我减小页面大小时，两者只是通过变薄并扩展内容来调整大小，但我希望它们彼此堆叠。我该怎么办？我已经尝试过媒体查询，但是也许在瞄准巨型叠加器时没有选择正确的“东西”。 TIA

<div class="container">
          <div class="row">
            <div class="col">
              <div class="jumbotron1 jumbotron-fluid" id="register">
                <div class="container1">
                  <h1 class="display-4">Register your interest!</h1>
                  <p class="lead">Festival days will be free, but seats will be limited,
                      so register your interest early and don't miss out!</p>
                  <form>
                      <div class="form-group">
                        <div class="row">
                          <div class="col">
                            <label for="firstname">First name</label>
                            <input type="text" class="form-control" id="firstname" 
                            placeholder="Enter first name">
                          </div>
                          <div class="col">
                            <label for="lastname">Last name</label>
                            <input type="text" class="form-control" id="lastname"
                            placeholder="Enter last name">
                          </div>
                  
                        </div>
                        <br>
                          <label for="exampleInputEmail1">Email address</label>
                          <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <h4>Which days are you interested in?</h4>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                            <label class="form-check-label" for="inlineCheckbox1">August 5th</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                            <label class="form-check-label" for="inlineCheckbox2">August 6th</label>
                          </div>
                          <br>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
                            <label class="form-check-label" for="inlineCheckbox3">August 7th</label>
                          </div>
                          <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
                              <label class="form-check-label" for="inlineCheckbox3">August 8th</label>
                            </div>
                            <br>
                            <br>
                            <div> <button type="submit" class="btn btn-primary">Submit</button></div>
                     
                    </form>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="jumbotron2" id="latestNews">
                <h1 class="display-4">Latest News</h1>
                <div class="list-group">
                   </div>
                    <p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
                  </a>
                 
                </div>
            </div>
          </div>

Answer 1

使用col-md-6代替col

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="jumbotron1 jumbotron-fluid" id="register">
        <div class="container1">
          <h1 class="display-4">Register your interest!</h1>
          <p class="lead">Festival days will be free, but seats will be limited, so register your interest early and don't miss out!</p>
          <form>
            <div class="form-group">
              <div class="row">
                <div class="col">
                  <label for="firstname">First name</label>
                  <input type="text" class="form-control" id="firstname" placeholder="Enter first name">
                </div>
                <div class="col">
                  <label for="lastname">Last name</label>
                  <input type="text" class="form-control" id="lastname" placeholder="Enter last name">
                </div>

              </div>
              <br>
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <h4>Which days are you interested in?</h4>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
              <label class="form-check-label" for="inlineCheckbox1">August 5th</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
              <label class="form-check-label" for="inlineCheckbox2">August 6th</label>
            </div>
            <br>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
              <label class="form-check-label" for="inlineCheckbox3">August 7th</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
              <label class="form-check-label" for="inlineCheckbox3">August 8th</label>
            </div>
            <br>
            <br>
            <div> <button type="submit" class="btn btn-primary">Submit</button></div>

          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="jumbotron2" id="latestNews">
        <h1 class="display-4">Latest News</h1>
        <div class="list-group">
        </div>
        <p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a>
          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </p>
      </div>
    </div>
  </div>

CodePen

Answer 2

我遇到了同样的问题；

仅使用时，列将共享您给他们的位置。您也可以给它们一个权重，在bootstrap4中，整行有12个colm。当您说一个col-4和另一个col-8时，他们会像1/3和2/3一样共享屏幕。

现在，当它们停止换行时，还可以给它们一个尺寸。它们定义了小管的最小宽度。像col-sm / md / lg / xl（-1/2/3/4/5/6/7/8/9）例如col-md-4。

留在这里

最小宽度的sm：576像素
md的最小宽度：768像素
lg的最小宽度：992px
xl（最小宽度：1200像素）

我认为md应该适合您。因此，请使用col-md定义您的列：div class =“ col- md ”

减小屏幕尺寸时，将一个超大加速器堆叠在一起

2 个答案: