html - 拉动 div 右/左 Bootstrap 中的所有元素

Question

我希望让我的页面具有响应性，添加了 Bootstrap 并将我的两个 div 排成一行，放在一个流体容器中。

我尝试向左按钮添加向右拉/向右浮动，向右图像向左拉/向左浮动，但它们没有移动。

我没有使用正确的类吗？

HTML:

<div class="container-fluid">
    <div class="row">
            <div class="col-md-4 right" style="float-right">
                <div class="h1padding"></div>
                <a class = "h1" style="float-right" href="" id="introID"><b>INTRO</b></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>

                <div class="h1padding"></div>
                <a class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a>
                <br><br>
                <div class="h1padding"></div>
                <div class="h1padding"></div>
            </div>
            <div class="col-md-8 left" style="float-left">
                <img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
            </div>
    </div>
</div>

CSS:

a:link, a:visited {
        font-family: 'Gotham';
        text-align: right;
        color: white;
        background: #005870;
        border: none;
        padding: 15px;
        font-size: 2rem;
        margin-top: 10px;
        cursor: pointer;
        position: absolute;
        right: 65%;
        transition: .4s;
        text-decoration: none;
}


a:hover, a:active {
        font-size: 2.5rem;
        color: #005870;
        background: white;
        transition: .4s;
        text-decoration: none;
}


h1{
    font-family: Gotham-Bold;
    text-align: right;
    text-transform: uppercase;
    color: white;
    background: #005870;
    border: none;
    padding: 15px;
    font-size: 2rem;
    margin-top: 10px;
    cursor: pointer;
    position: absolute;
    right: 65%;
    transition: .4s;
    text-decoration: none;
}

h1:hover {
    font-size: 2.5rem;
    color: #005870;
    background: white;
    transition: .4s;
    text-decoration: none;
}

图像似乎在左边(唯一的另一件事是弄清楚如何将它垂直居中)但按钮仍然在左边。

提前致谢:)

Answer 1

您的样式属性无效。

<div class="col-md-8 left" style="float-left">
    <img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>

应该是:

<div class="col-md-8 left" style="float:left;">
    <img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>

或者使用 bootstrap 自己的类:

<div class="col-md-8 pull-left">
    <img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>

现在您的 content 位于右侧/左侧，您使用的元素是内联的，因此它们受到 text-align CSS 属性的影响:

<div class="col-md-8 pull-left text-right">
    <img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>

使用 Bootstrap 的上述示例的外部代码笔:

• > https://codepen.io/anon/pen/ZXvjJG