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>

或者使用bootstrap自己的类：

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

现在您的内容位于右侧/左侧，您使用的元素是内联的，因此它们受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

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>

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

2 个答案: