Question

我无法在引导程序中水平对齐列。我想要的是图像在左边，文本在右边，但它一直在垂直堆叠。我可以得到一些帮助吗？

根据我的理解，col-md-6会将页面分为两列，col-xs-12会将它们垂直堆叠在移动设备上，但似乎对我而言并不是这样。我正在做的事情是覆盖默认的引导CSS？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
      crossorigin="anonymous">
    <style media="screen" type="text/css">
      img {
        width: 100%;
      }
      .btn {
        margin: auto;
      }
      .vertical-center {
        height:100%;
        width:100%;
      }
      .left-text {
        text-align: left;
      }

    </style>
  </head>
  <body class="verticalcenter">
    <div class="container vertical-center">
      <div class="col-xs-12 col-sm-12 col-lg-6">
        <img src="./profile.jpg">
      </div>
      <div class="col-xs-12 col-sm-12 col-lg-5">
        <div class="row left-text">
          <div class="col-xs-12 col-md-8">
            <h2>MyStackFlowethOver</h2>
          </div>
          <div class="col-xs-12 col-md-8">
            <h4>web developer</h4>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="#" class="" role="button" target="_blank">github</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="#" class="" role="button" target="_blank">linkedin</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="3" class="" role="button" target="_blank">twitter</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="/blog" class="" role="button" target="_blank">blog</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

首先，您要插入的每一行内容都需要<div class = "row">。那可能会弄乱您的布局。

代码示例：

<div class = "row">
   <div class="col-xs-12 col-sm-12 col-lg-6">
     <img src="./profile.jpg">
   </div>
</div>

以此类推。

Answer 2

这应该可以解决您的问题。

MERGE1=John

Answer 3

FYI在Bootstrap-4中，没有像col-xs- *这样的类，因此您需要将col-xs-12替换为col-12，并且您还忘记了两列要用行类包装，我也已经在您检查过您还需要在代码中添加一个meta标签，以用于需要响应的网站，例如

更新后的代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <style media="screen" type="text/css">
        img {
            width: 100%;
          }
          .btn {
            margin: auto;
          }
          .vertical-center {
            height:100%;
            width:100%;
          }
          .left-text {
            text-align: left;
          }
    </style>
</head>
<body class="verticalcenter">
    <div class="container vertical-center">
        <div class="row">
            <div class="col-12 col-sm-12 col-lg-6">
                <img src="./profile.jpg">
            </div>
            <div class="col-12 col-sm-12 col-lg-5">
                <div class="row left-text">
                    <div class="col-12 col-md-8">
                        <h2>MyStackFlowethOver</h2>
                    </div>
                    <div class="col-12 col-md-8">
                        <h4>web developer</h4>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="#" class="" role="button" target="_blank">github</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="#" class="" role="button" target="_blank">linkedin</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="3" class="" role="button" target="_blank">twitter</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="/blog" class="" role="button" target="_blank">blog</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我认为这会对您有所帮助。快乐的代码:)

列不会与Bootstrap水平对齐

3 个答案: