Question

我在尝试创建时的响应式布局上遇到了一些问题。主页看起来像手机和大屏幕上的狗屎。
音乐部分在我的13英寸Macbook上看起来非常不错，但在我的iPhone上，Apple Music和Spotify按钮正在被推下，所以它看起来不再好看了。
我也不想在我的音乐部分添加youtube视频。 YouTube视频必须位于我制作的灰色方块内。我试图把它放在div class =“container”和div class =“jumbotron”中但它不起作用。我知道这有点拗口，但我真的很感激。

我从这个网站获得了一些灵感 http://www.spotify-thedrop.com/#/

您可以在此处查看我的网站。 http://homeofedm.com/

以下是我的问题的编码。

这是主页部分

<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <a href="#"><img src="images/david guetta.jpg" /></a>
        <div class="carousel-caption">
          <h3>Meow</h3>
          <p>Just Kitten Around</p>
        </div>
      </div>
      <div class="item">
        <a href="#"><img src="images/zedd.jpg" /></a>
        <div class="carousel-caption">
          <h3>Meow</h3>
          <p>Just Kitten Around</p>
        </div>
      </div>
      <div class="item">
        <a href="#"><img src="images/steve aoki.jpg" /></a>
        <div class="carousel-caption">
          <h3>Meow</h3>
          <p>Just Kitten Around</p>
        </div>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel-example" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

<div class="container-fluid">
<div class="row">
<a href="avicii.html">
<div class="col-sm-4"> <img id="avicii" src="images/avicii2.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-4"> <img id="martin" src="images/martin garrix.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-4"> <img id="david" src="images/david guetta2.jpg" alt="" /></div>
</a>
</div>
</div>

<div class="container-fluid">
<div class="row">
<a href="default.asp">
<div class="col-sm-4"> <img id="zedd" src="images/zedd2.jpg" alt="" /></div>
</a>
<a href="default.asp">
<div class="col-sm-8"> <img id="dim" src="images/dimitri vegas and like mike.png" alt="" /></div>
</a>
</div>
</div>

的CSS。

> #avicii {   height: 458px;   width: 458px; }
> 
> #martin {   height: 458px;   width: 458px; }
> 
> #david {   height: 458px;   width: 458px; }
> 
> #zedd {   height: 458px;   width: 458px; }
> 
> .navbar.navbar-inverse {   margin-bottom: 0; }
> 
> #dim {   height: 458px;   width: auto; }

音乐栏目

<div class="container">
  <div class="jumbotron">
<h3>Home (feat. Alex Joseph) - Single<h3>
<img src="images/Home (feat. Alex Joseph) - Single.jpeg" alt="" />
<a id="music" href="https://geo.itunes.apple.com/us/album/home-feat.-alex-joseph-single/id1081864517?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/12HmJ4Q5ksOGgaqKgZLvdE">
<img id="spotify" src="images/spotify.png" alt="" />
</div>
</a>

<div class="container">
  <div class="jumbotron">
<h3>Aural Psynapse (ATTLAS Remix) - Single<h3>
<img src="images/Aural Psynapse (ATTLAS Remix) - Single.jpeg" alt="" />
<a id="music1" href="https://geo.itunes.apple.com/us/album/aural-psynapse-attlas-remix/id1065961780?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/1JTMC6LvxZ66NLi25nqitw">
<img id="spotify1" src="images/spotify.png" alt="" />
</div>
</a>
</div>

<div class="container">
  <div class="jumbotron">
<h3>Parnassia - Single<h3>
<img src="images/Parnassia - Single.jpeg" alt="" />
<a id="music2" href="https://geo.itunes.apple.com/us/album/parnassia-single/id1076534339?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/0BkLLh1dgbUUof2COoAOWC">
<img id="spotify2" src="images/spotify.png" alt="" />
</div>
</a>
</div>

<div class="container">
  <div class="jumbotron">
<h3>Lifted - Single<h3>
<img src="images/Lifted - Single.jpeg" alt="" />
<a id="music3" href="https://geo.itunes.apple.com/us/album/lifted-single/id1071404761?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/2YHsab2zqZ70oQ1H54KmrD">
<img id="spotify3" src="images/spotify.png" alt="" />
</div>
</a>
</div>

<div class="container">
  <div class="jumbotron">
<h3>Love Is Blind (feat. Glenna) [Remixes] - Single<h3>
<img src="images/Love Is Blind (feat. Glenna) [Remixes] - Single .jpeg" alt="" />
<a id="music4" href="https://geo.itunes.apple.com/us/album/love-is-blind-feat.-glenna/id1081220187?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/album/59hXL8XHJIiyGcOEQrDxCO">
<img id="spotify4" src="images/spotify.png" alt="" />
</div>
</a>
</div>

<div class="container">
  <div class="jumbotron">
<h3>Get Down (Extended Mix) - Single<h3>
<img src="images/Get Down (Extended Mix) - Single .jpeg" alt="" />
<a id="music5" href="https://geo.itunes.apple.com/us/album/get-down-extended-mix-single/id1065898774?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/track/0FZOz3LYpe6d0dKk5g0Ngu">
<img id="spotify5" src="images/spotify.png" alt="" />
</div>
</a>
</div>

<div class="container">
  <div class="jumbotron">
<h3>Whatever (feat. KOLAJ) [Remixes] - Single<h3>
<img src="images/Whatever (feat. KOLAJ) [Remixes] - Single .jpeg" alt="" />
<a id="music6" href="https://geo.itunes.apple.com/us/album/whatever-feat.-kolaj-remixes/id1082087582?mt=1&app=music" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_music-lrg.svg) no-repeat;width:165px;height:40px;"></a>
<a href="https://open.spotify.com/album/6wQKF3wXM7LNHREX2GKfsk">
<img id="spotify6" src="images/spotify.png" alt="" />
</div>
</a>
</div>

的CSS。

#music {
  position: absolute;
  top: 280px;
}

#spotify {
position: absolute;
  height: 35px;
  width: 110px;
  top: 320px;
}

#music1 {
  position: absolute;
  top: 655px;
}

#spotify1 {
position: absolute;
  height: 35px;
  width: 110px;
  top: 695px;
}

#music2 {
  position: absolute;
  top: 1025px;
  }

  #spotify2 {
  position: absolute;
    height: 35px;
    width: 110px;
    top: 1065px;
  }

  #music3 {
    position: absolute;
    top: 1400px;
    }

    #spotify3 {
    position: absolute;
      height: 35px;
      width: 110px;
      top: 1440px;
    }

    #music4 {
      position: absolute;
      top: 1770px;
      }

      #spotify4 {
      position: absolute;
        height: 35px;
        width: 110px;
        top: 1810px;
      }

      #music5 {
        position: absolute;
        top: 2140px;
        }

        #spotify5 {
        position: absolute;
          height: 35px;
          width: 110px;
          top: 2180px;
        }

        #music6 {
          position: absolute;
          top: 2515px;
          }

          #spotify6 {
          position: absolute;
            height: 35px;
            width: 110px;
            top: 2555px;
          }

Answer 1

了解网格系统

大型设备桌面（.col-lg-），表示等于或大于1200像素。

中型设备桌面（.col-md-），表示小于1200像素但等于或大于992像素。

小型设备平板电脑（.col-sm-）意味着小于992像素但等于或大于768像素。

超小型设备电话（.col-xs-），意味着小于768px。

您可以通过更改其值来在不同设备中进行不同的布局。

您也可以使用

.hidden-sm 类隐藏的特殊元素

.visible-sm - 让特别明显有关更多信息，请参阅bootstrap文档

响应式Bootstrap问题

1 个答案: