拉出 div 右/左引导程序中的所有元素

Question

我希望让我的页面具有响应性，添加引导程序并将我的两个 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>

或者使用引导程序自己的类：

<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 的上述示例的外部 codepen：

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

Answer 2

您无需直接拉到您在行中首先放置的<div>。

有办法做到这一点，但不推荐，也不是引导方式。

你所能做的就是在你的 HTML 中添加类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8" style="border:3px solid red">
      <img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/23/23636-bigthumbnail.jpg" id="frame" />
    </div>
    <div class="col-md-4" style="border:3px solid blue">
      <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>
</div>