为什么在Bootstrap 4中不连续将Col-4放置？

发布于 2025-01-23 10:16:23 字数 2413 浏览 0 评论 0原文

我无法弄清楚为什么Col-4不起作用，将所有3个项目连续

        <footer>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h2><strong>Test</strong></h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="col-4">
                        <strong><b>Address</b></strong>
                        <p>
                            Test<br>
                            Test<br>
                            Test
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Contact</b></strong>
                        <p>
                            Tel: 123456<br>
                            Email: <a href="mailto:[email protected]">[email protected]</a>
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Legal</b></strong>
                        <p>
                            <a href="#" id="test">Test</a><br>
                            <a href="#" id="test1">Test</a><br>
                            <a href="#" id="test2">Test</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        © Copyright 2022
                    </div>
                </div>
            </div>
        </footer>

在浏览器中播放，整个过程看起来像

单击此处

我使用Bootstrap 4.0.0和Firefox作为浏览器。请帮助我

最好的问候

Wediga

原文

I can't figure out why the col-4 doesn't work to have all 3 items in a row

        <footer>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h2><strong>Test</strong></h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="col-4">
                        <strong><b>Address</b></strong>
                        <p>
                            Test<br>
                            Test<br>
                            Test
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Contact</b></strong>
                        <p>
                            Tel: 123456<br>
                            Email: <a href="mailto:[email protected]">[email protected]</a>
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Legal</b></strong>
                        <p>
                            <a href="#" id="test">Test</a><br>
                            <a href="#" id="test1">Test</a><br>
                            <a href="#" id="test2">Test</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        © Copyright 2022
                    </div>
                </div>
            </div>
        </footer>

In the browser the whole thing looks like this

Click here

I use Bootstrap 4.0.0 and Firefox as browser. Please help me

Best regards

wediga

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骷髅 2025-01-30 10:16:23

列类表示您要在每行可能12的12列中使用的列数。因此，如果您想要三个相等的宽列，则可以使用.col-4。

行是列的包装纸。行排对一行对齐，因此您应始终使用。外部Div中的Row Class将所有COL包装在一行中。

<div class="row">
            <div class="col-4"> </div>
              <div class="col-4"> </div>
              <div class="col-4"> </div>
          </div>

这样，它将单行包装所有Col-4。
因此，您需要添加与类行的DIV。或者只需用Col-12删除DIV即可。
这是答案。

排在col-4上方

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4">
                <strong><b>Address</b></strong>
                <p>
                  Test<br />
                  Test<br />
                  Test
                </p>
              </div>
              <div class="col-4">
                <strong><b>Contact</b></strong>
                <p>
                  Tel: 123456<br />
                  Email: <a href="mailto:[email protected]">[email protected]</a>
                </p>
              </div>
              <div class="col-4">
                <strong><b>Legal</b></strong>
                <p>
                  <a href="#" id="test">Test</a><br />
                  <a href="#" id="test1">Test</a><br />
                  <a href="#" id="test2">Test</a>
                </p>
              </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

2。从外部除去Col-12。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <strong><b>Address</b></strong>
          <p>
            Test<br />
            Test<br />
            Test
          </p>
        </div>
        <div class="col-4">
          <strong><b>Contact</b></strong>
          <p>
            Tel: 123456<br />
            Email: <a href="mailto:[email protected]">[email protected]</a>
          </p>
        </div>
        <div class="col-4">
          <strong><b>Legal</b></strong>
          <p>
            <a href="#" id="test">Test</a><br />
            <a href="#" id="test1">Test</a><br />
            <a href="#" id="test2">Test</a>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

Rows are wrappers for columns. rows align all columns in a row so you should always use .row class in outer div to wrap all col in a single row.

<div class="row">
            <div class="col-4"> </div>
              <div class="col-4"> </div>
              <div class="col-4"> </div>
          </div>

like this it will wrap all col-4 in a single row.
so you need to add a div with class row. or just remove the div with col-12.
here is the answer.

with row above the col-4

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4">
                <strong><b>Address</b></strong>
                <p>
                  Test<br />
                  Test<br />
                  Test
                </p>
              </div>
              <div class="col-4">
                <strong><b>Contact</b></strong>
                <p>
                  Tel: 123456<br />
                  Email: <a href="mailto:[email protected]">[email protected]</a>
                </p>
              </div>
              <div class="col-4">
                <strong><b>Legal</b></strong>
                <p>
                  <a href="#" id="test">Test</a><br />
                  <a href="#" id="test1">Test</a><br />
                  <a href="#" id="test2">Test</a>
                </p>
              </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

2 . removing col-12 from outer div.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <strong><b>Address</b></strong>
          <p>
            Test<br />
            Test<br />
            Test
          </p>
        </div>
        <div class="col-4">
          <strong><b>Contact</b></strong>
          <p>
            Tel: 123456<br />
            Email: <a href="mailto:[email protected]">[email protected]</a>
          </p>
        </div>
        <div class="col-4">
          <strong><b>Legal</b></strong>
          <p>
            <a href="#" id="test">Test</a><br />
            <a href="#" id="test1">Test</a><br />
            <a href="#" id="test2">Test</a>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

回复收藏 0 原文

~没有更多了~