响应式引导问题答案

【问题标题】：Responsive Bootstrap problems响应式引导问题
【发布时间】：2016-05-25 11:27:44
【问题描述】：

我尝试创建的响应式布局存在一些问题。主页在手机和大屏幕上看起来很糟糕。
音乐部分在我的 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;
          }

【问题讨论】：

标签： android html ios css twitter-bootstrap

【解决方案1】：

了解网格系统

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

中型设备台式机 (.col-md-)，表示小于 1200 像素但等于或大于 992 像素。

小型设备平板电脑 (.col-sm-)，表示小于 992 像素但等于或大于 768 像素。

超小设备电话 (.col-xs-)，即小于 768 像素。

你可以通过改变那里的值在不同的设备上做出不同的布局。

你也可以使用

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

.visible-sm- 使特别可见有关更多信息，请阅读引导文档

【讨论】：