Question

如何使用bootstrap更准确地定位元素？示例：现在我有一个带有类.bg的div有div内部的内容通过bootstrap定位，但是当我使用偏移类来定位元素时，我希望它看起来只适用于桌面/平板电脑，但如果我们谈论移动设计 - 它看起来并不好看，所以我的主要问题是如何在手机上使用类.bg将我的元素集中在div中？一些可能对您有帮助的代码：

.bg {
  background-color: rgba(15, 26, 47, 0.9);
  max-width: 920px;
  max-height: 420px;
  margin: 100px auto;
  z-index: 36;
  position: relative;
} // main div

.goodsright,
.goodsleft {
font-size: 16px;
letter-spacing: 0.02em;
line-height: 1.25;
text-align: left;
margin-top: 40px;
z-index:36;
} // content inside it
//bootstrap classes for elements inside .bg class
<div class="col-sm-4 col-sm-offset-1 col-xs-offset-4  goodsleft">
<div class="col-sm-4 col-sm-offset-2 col-xs-offset-4 goodsright">

Answer 1

所以我看了一下你的代码。尝试实现此功能，以便在移动设备上获得所需的视图：

HTML：

<div class="container">
    <div class="bg">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsleft">
            <h1>Content Title 1</h1>
            <p>
                Content 1 information here.
            </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 goodsright">
            <h1>Content Title 2</h1>
            <p>
                Content 2 information here.
            </p>
        </div>
    </div>
</div>

CSS：

.bg {
    background-color: rgba(15, 26, 47, 0.9);
    width: 100%;
    z-index: 36;
}

.goodsright, .goodsleft {
    background-color: rgba(15, 26, 47, 0.9);
    padding: 40px;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: left;
    margin-top: 40px;
    z-index:36;
}

如果您正在尝试使用col-xs的偏移量，那么请确保将其上方的下一个视口偏移设置为0，它需要重置，其示例如下：

<div class="container">
    <div class="bg">
        <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsleft">
            <h1>Content Title 1</h1>
            <p>
                Content 1 information here.
            </p>
        </div>
        <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6 col-lg-6 goodsright">
            <h1>Content Title 2</h1>
            <p>
                Content 2 information here.
            </p>
        </div>
    </div>
</div>

希望这有帮助！

使用bootstrap定位元素

1 个答案: