Question

我希望有人可以帮助我。我可能犯了一个愚蠢的错误，但我跟随Udacity视频并且代码看起来完全相同。提前谢谢。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Portfolio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <img src="images/logo.jpg" alt="Udacity logo">
                </div>
                <div class="col-md-6">
                    <h1>John Doe</h1>
                    <h4>Front-end Ninja</h4>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

只需添加正确答案（https://stackoverflow.com/a/38490294/3718753），最好在列中包含多个类，以便它们适当缩放到不同的屏幕尺寸。

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <img src="images/logo.jpg" alt="Udacity logo">
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <h1>John Doe</h1>
            <h4>Front-end Ninja</h4>
        </div>
    </div>
</div>

Answer 2

最可能的原因是您的代码依赖于浏览器窗口宽度 - 代码col-md-6只会在浏览器窗口宽度为992px或更宽的位置生成两列。

对于使用该类的两个div，尝试将col-md-6替换为col-sm-6，这应该确保即使在较小的尺寸下，列也会并排显示。

或者，使屏幕更宽，以根据屏幕宽度查看列的移动方式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Portfolio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <img src="images/logo.jpg" alt="Udacity logo">
                </div>
                <div class="col-sm-6">
                    <h1>John Doe</h1>
                    <h4>Front-end Ninja</h4>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 3

确保使用正确的色谱柱尺寸。 xs是768以下，sm是768到991之间，md和lg是991以上。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Portfolio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <img src="images/logo.jpg" alt="Udacity logo">
                </div>
                <div class="col-xs-6">
                    <h1>John Doe</h1>
                    <h4>Front-end Ninja</h4>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 4

您的代码似乎一切正常。

http://codepen.io/anon/pen/JKLbvQ

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Portfolio</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Udacity logo">
                </div>
                <div class="col-md-6">
                    <h1>John Doe</h1>
                    <h4>Front-end Ninja</h4>
                </div>
            </div>
        </div>
    </body>
</html>

Bootstrap列将无法正确对齐，而是一个在另一个之下

4 个答案: