Question

我是Bootstrap的新手并且需要帮助。

我的文字和图片分为四列，您可以在我的代码中看到。我使用媒体查询根据屏幕大小设置了对齐方式（如CSS所示）。但是，如果我正在调整窗口大小并达到平板电脑视图的屏幕大小，您可以说（查看屏幕截图1）它看起来很安静，因为文本太大而且图像太靠近文本。因此，在这个屏幕尺寸，即平板电脑视图，我希望我的列垂直对齐（如屏幕截图2），但我希望我的图像在左侧，文本和标题应该在图像旁边。但它不应该打扰移动视图，因为一切都在移动视图的中心位置（查看截图3），这对我来说已经非常适合了。

如果我的问题仍不明确，请检查模板http://www.templatemonster.com/demo/58152.html

他们有我喜欢的“工作团队”部分。

我期待得到帮助！

谢谢！

<div class="jumbotron">
<div id="wrapper"> <!--Wrapper-->
    <div class="container"> <!--Container-->
        <div class="row" style="padding-bottom: 40px;">
            <div class="col-md-12" align="center">
                <h1>Meet Us</h1><hr class="style1"></hr>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <img src="images/11.jpg" class="img-circle img-responsive" width="180"/>
            </div>
            <div class="col-sm-3">
                <h2 class="style1">Shaikh Obaidullah</h2>
                <h3 class="style1">CEO / Web Developer</h3>
                <hr class="style2"></hr>
                <p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p>
            </div>
            <div class="col-sm-3">
                <img src="images/12.jpg" class="img-circle img-responsive" width="180"/>
            </div>
            <div class="col-sm-3">
                <h2 class="style1">Ovais M. Shaikh</h2>
                <h3 class="style1">Graphic Designer</h3>
                <hr class="style2"></hr>
                <p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p>
            </div>
        </div>
    </div> <!--Container-END-->
</div> <!--Wrapper-END-->

    .jumbotron {
    background-image: url('../images/13.jpg');
    background-attachment: fixed;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.img-responsive {
    margin: 0 auto;
}

#wrapper {
    background-color: #FFF;
    background: rgba(0,0,0,.7);
    color: #FFF;
    padding-bottom: 40px;
}


hr.style1 {
    margin-bottom: 30px;
    margin-top: 30px;
    width: 100px;
    border-top: 2px solid #8884bc;
}


@media (min-width: 768px) {
h2.style1{
    color: #8884bc;
    text-align: left;
    margin-bottom: 0px;
}

h3.style1{
    text-align: left;
    margin-top: 10px;
}

hr.style2 {
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 0px;
    width: 100px;
    border-top: 2px solid #8884bc;
}

p.style1{
    font-size: 20px;
    text-align: left;
    color: #eee;
}

.jumbotron{
    margin-bottom: 0px;
}
}

@media only screen and (max-width:768px) {
hr.style2 {
    margin-bottom: 30px;
    width: 100px;
    border-top: 2px solid #8884bc;
}

h2.style1{
    color: #8884bc;
    text-align: center;
    margin-bottom: 0px;
}

h3.style1{
    text-align: center;
    margin-top: 5px;
    font-size: 20px;
}

p.style1{
    margin-bottom: 80px;
    font-size: 16px;
    text-align: center;
    color: #eee;
}
}

Answer 1

我不知道我是否清楚地了解你。但我认为你的代码必须是这样的：

{{1}}

和类右，必须是float：right;，并且left float：left; ，amd col-md-5必须显示：inline-block;

如何根据屏幕尺寸对齐图像和文本？

1 个答案: