Bootstrap左侧边栏在较小的视口上不能很好地工作
我正在尝试创建一个响应式网站，但是左侧边栏在1024px下降到240px的较小视口上看起来不太好。
我不确定是否需要调整我的HTML以将左侧边栏和菜单切换到小型设备上，但是当您调整浏览器大小并且侧边栏出现在较小设备上的菜单顶部时，它看起来不太好。
您可以在此处查看：http://pugshealth.com/test/ 响应工具：http://mattkersley.com/responsive/
这是我的HTML：
// no products found
// Launch Add New product Activity
Intent i = new Intent(getApplicationContext(),
LogIn.class);
// Closing all previous activities
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(i);
这里是CSS：
<!-- ___Start Home Page___ -->
<div class="container-fluid no-padding home-2" id="container-full">
<div class="row no-margin">
<!-- ___Start Left Menu___ -->
<div class="col-md-2 no-padding">
<div id="left-sidebar">
<a href="#"><img src="images/banner5.jpg" align="center" class="banner-side"/></a>
<a href="#"><img src="images/banner6.jpg" align="center" class="banner-side"/></a>
<a href="#"><img src="images/banner5.jpg" align="center" class="banner-side"/></a>
</div><!-- End Menu Left -->
</div><!-- End Column -->
<!-- End Left Menu -->
<!-- ___Start Column___ -->
<div class="col-md-10 no-padding">
<!-- ___Start Top Bar___ -->
<div class="top-bar">
<div class="top-bar-head">
<nav class="navbar navbar-dark bg-inverse">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
☰ MENU
</button>
<!-- Nav Content -->
<div class="collapse navbar-toggleable-sm" id="nav-content">
<a class="navbar-brand" href="#">BLOGZ</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Freebies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</div>
</nav>
</div><!-- End Top Bar Head -->
</div><!-- End Top Bar -->
<!-- ___Main Content___ -->
<div class="main-content">
<div class="row">
<div class="col-md-9 w-100">
<!-- ___Main Slider___ -->
<div class="main-slider">
<div id="slider">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="images/slider-large/slider-large-1.jpg" alt="First slide">
<div class="carousel-caption">
<h3>First Label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur..</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slider-large/slider-large-2.jpg" alt="Second slide">
<div class="carousel-caption">
<h3>Second Label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur..</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slider-large/slider-large-3.jpg" alt="Third slide">
<div class="carousel-caption">
<h3>Third Label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur..</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- End Slider -->
</div><!-- End Main Slider -->
<div class="main-post-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<!-- ___Start Post Bottom Content___ -->
<div class="col-md-6">
<div class="post-bottom-content">
<img alt="" class="img-responsive" src=
"images/pb-md-content/pbc-md-9.jpg">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="#">READ MORE → </a>
</div><!-- End Post Bottom Content -->
</div><!-- End Column -->
<!-- ___Start Post Bottom Content___ -->
<div class="col-md-6 space-md-fix">
<div class="post-bottom-content">
<img alt="" class="img-responsive" src=
"images/pb-md-content/pbc-md-9.jpg">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="#">READ MORE → </a>
</div><!-- End Post Bottom Content -->
</div><!-- End Column -->
<!-- ___Start Post Right Content___ -->
<div class="col-md-8 text-center space-md-fix">
<div class="post-right-content">
<div class="media">
<div class="media-left no-padding">
<img alt="" class="img-responsive" src=
"images/pb-content/pr-sm-1.jpg">
</div>
<div class="media-body">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
</div>
</div>
</div><!-- End Post Right Content -->
</div><!-- End Column -->
<div class="col-md-4 text-center space-md-fix">
<div class="post-only-content">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
</div><!-- End Post Only Content -->
</div><!-- End Column -->
</div><!-- End Row -->
<div class="row no-margin">
<div class="col-md-4 space-md-fix">
<!-- ___Post Bottom Content___ -->
<div class="post-bottom-content">
<img alt="" class="img-responsive" src=
"images/pb-content/pbc-sm-1.jpg">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div><!-- End Post Bottom Content -->
<div class="post-only-content">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor</p>
<a href="#">READ MORE → </a>
</div><!-- End Post Only Content -->
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-8 space-md-fix">
<div class="row">
<!-- ___Start Column___ -->
<div class="col-md-12 text-center space-md-fix">
<div class="post-right-content">
<div class="media">
<div class="media-left no-padding">
<img alt="" class="img-responsive" src=
"images/pb-content/pr-sm-2.jpg">
</div>
<div class="media-body">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div>
</div>
</div><!-- End Post Right Content -->
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-6 space-md-fix">
<div class="post-bottom-content">
<img alt="" class="img-responsive" src=
"images/pb-content/pbc-sm-2.jpg">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div><!-- End Post Bottom Content -->
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-6 space-md-fix">
<div class="post-bottom-content">
<img alt="" class="img-responsive" src=
"images/pb-content/pbc-sm-3.jpg">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div><!-- End Post Bottom Content -->
</div><!-- End Column -->
</div><!-- End Row -->
</div><!-- End Column -->
</div><!-- End Row -->
<div class="row no-margin">
<!-- ___Start Column___ -->
<div class="col-md-4 text-center space-md-fix">
<div class="post-only-content">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div><!-- End Post Only Content -->
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-8 text-center space-md-fix">
<div class="post-right-content">
<div class="media">
<div class="media-left no-padding">
<img alt="" class="img-responsive" src=
"images/pb-content/pr-sm-3.jpg">
</div>
<div class="media-body">
<h3>BOOTSTRAP NEWS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<a href="#">READ MORE → </a>
<!-- ___Post Meta___ -->
</div>
</div>
</div><!-- End Post Right Content -->
</div><!-- End column -->
</div><!-- End Row -->
</div><!-- End Column -->
</div><!-- End Row -->
</div><!-- End Main Body Post -->
</div><!-- End Main Content -->
<!-- ___Start Column___ -->
<div class="text-center">
<div class="col-md-3 w-50">
<!-- ___Start Sidebar___ -->
<div class="sidebar">
<div class="sidebar-widget sidebar-ads">
<a href="#"><img alt="" class="img-responsive" src=
"images/banner1.gif"></a>
</div>
<div class="sidebar-widget sidebar-ads">
<a href="#"><img alt="" class="img-responsive" src=
"images/banner2.jpg"></a>
</div>
<div class="sidebar-widget sidebar-ads">
<a href="#"><img alt="" class="img-responsive" src=
"images/banner3.jpg"></a>
</div>
<div class="sidebar-widget">
<a href="#"><img alt="" class="img-responsive" src=
"images/banner4.jpg"></a>
</div>
</div><!-- End Side Bar -->
</div><!-- End Column -->
</div>
</div><!-- End Row -->
<div class="row no-margin">
<!-- ___Start Column___ -->
<div class="col-md-3">
<h3>FAQs</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-3">
<h3>Info</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-3">
<h3>Alumni</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div><!-- End Column-->
<!-- ___Start Column___ -->
<div class="col-md-3">
<h3>News</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div><!-- End Column-->
</div><!-- End Main Content -->
</div><!-- End Row -->
<!-- ___Start Bottom___ -->
<div class="bottom container-fluid">
<div class="row">
<!-- ___Contact Us___ -->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="bottom-contact widget">
<h3>
Notice
</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div><!-- End Column -->
<!-- ___News Letter___ -->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="newsletter widget">
<h3>
Sign Up for FREE!
</h3>
<div class="input-group">
<input class="form-control" placeholder="Your Email"
type="text"> <span class="input-group-btn no-radius">
<button class="btn btn-primary" type="button">
Sign
Up</span></span></span></span></button></span>
</div><!-- /input-group -->
</div>
</div><!-- End Column -->
<!-- ___Start Social Icons Column___ -->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="useful-links widget">
<h3>
Site Navigation
</h3>
<ul class="pull-left">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="elements.html">Portfolio</a>
</li>
</ul>
<ul class="pull-right">
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="#0">Info</a>
</li>
<li>
<a href="#0">Read Me</a>
</li>
</ul>
</div>
</div><!-- End Column -->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<!-- ___Start Social Icons___ -->
<div class="bottom-social widget">
<h3>
SOCIALS
</h3>
<div class="social-icon">
<ul>
<li>
<a class="connect-with-us facebook fa fa-facebook" href="#"></a>
</li>
<li>
<a class="connect-with-us instagram fa fa-instagram" href="#"></a>
</li>
<li>
<a class="connect-with-us twitter fa fa-twitter" href="#"></a>
</li>
<li>
</li>
</ul>
</div>
</div><!-- End Social Icons -->
</div><!-- End Column -->
</div><!-- End Row -->
</div><!-- End Bottom -->
<div class="footer text-center">
<p>
Copyright © 2015 Designmodo. All Rights Reserved.
</p>
</div>
</div><!-- End Column -->
</div><!-- End Row -->
</div><!-- End Container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
任何想法我需要在哪里调整我的代码？
2 个答案:
答案 0 :(得分：0)
问题在于你使用的那些图像像横幅一样，它们没有很好地重新调整尺寸。当我为这些横幅图像放置较小的宽度百分比时，它们会重新调整尺寸。类似的东西：
img {width: 70%;} or max-width:70%;
当然不要使用img标签，给横幅图片分类，然后减小宽度百分比
答案 1 :(得分：0)
HTML的顺序不正确。 如果您想让导航栏显示在上方，那么您必须先放置。
<body>
<nav class="navbar navbar-dark bg-inverse">
<!-- put navbar code here -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar"><!-- sidebar code goes here --></div>
<div class="col-md-10 sidebar"><!-- content goes here --></div>
</div>
然后，如有必要，您可以使用css将导航栏推到一边：
.navbar{ margin-left: 16.666667% }
.sidebar{ margin-top: -20px; }
我真的会先使用干净的bootstrap模板，只使用bootstrap类。一旦工作，您可以从调整样式表开始。
为了你的图像，我会添加一个＆＃34; img-responsive＆＃34;所以他们适应侧边栏。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？