html - 如何显示两列 div 以便在调整浏览器大小时不会换行？我正在使用 Bootstrap

Question

h1 {
    font-size: 36px;
}
h3 {
    font-size: 24px;
}
.container {
    max-width: 1115px;
    margin: 0 auto;
}
.profile-pic {
    margin-top: 3vh;
}

<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
            </div>
            <h1 class="col-sm-6 text-right middle"> Abhi</h1>
            <h3 class="profession text-right">FRONT-END</h3>
        </div>
</header>

大家好，我正在使用 bootstrap，我希望我的图像和 h1 在同一行，图像在最左边，当浏览器调整大小时，标题在最右边。当我调整大小时，图像出现在顶部，而我的标题下降，这看起来不太好。

problem i m facing is shown in image

Answer 1

如果你想在右侧的列中显示姓名和职业，你应该将它们放在某个容器中(不是 .container，只是一个新的父元素)类 .col- **-6.
在下面的示例中，我将切换到 -xs- 以获取小于 768px 的分辨率。我还删除了 .container 的居中，因为它已经由 BS afaik 完成。

编辑:working example in Bootply

相关文档:Bootstrap 3.x Grid

.col-xs-6 {
  outline: 1px dashed darkred;
}
h1 {
    font-size: 36px;
}
h3 {
    font-size: 24px;
}
.container {
    max-width: 1115px;
    /*margin: 0 auto; already applied by BS afaik*/
}
.profile-pic {
    margin-top: 3vh;
}

<header>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
            </div>
            <div class="col-xs-6">
              <h1 class="text-right middle"> Abhi</h1>
              <h3 class="profession text-right">FRONT-END</h3>
            </div>
        </div>
</header>