Question

我在bootstrap 3中开发了一个网页。在计算机屏幕上看起来都很完美。但是，在移动屏幕上，jumbotron中的文字出现了，因为它上面会出现一个水平滚动条。

<div id="home">
    <div id="jumb" class="jumbotron">
        <div class="container text-center">
        <div class="row">
            <div class="col-lg-3">
                <img id="abc" src="images/abc.jpg" alt="logo" />
            </div>
            <div class="col-lg-9" >
                <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                <div class="collapse navbar-collapse" id="navbar-collapse">
            <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
            <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
            <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
            <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                <div class="btn-group">
                    <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->             
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>

Answer 1

看那里是css和html修复了崩溃类的细节＆＃34; javascript在代码片段中不起作用在你的文件中尝试＃34;

＆＃13;

.navbar-toggle .icon-bar {
  background: #000; //or whatever you want
}

.my-nav-toggle {
  float: none !important;
  }



//this is a general idea but modify as you want

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
      <div id="jumb" class="jumbotron">
         <div class="container text-center">
            <div class="row">
               <div class="col-lg-3">
                  <img id="abc" src="images/abc.jpg" alt="logo" />
               </div>
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed my-nav-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>
               </div>
               <div class="col-lg-9" >
                  <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                  <div  class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                     <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
                     <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
                     <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
                     <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                     <div class="btn-group">
                        <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

＆＃13;

或只是删除navbar-collapse崩溃类

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="home">
      <div id="jumb" class="jumbotron">
         <div class="container text-center">
            <div class="row">
               <div class="col-lg-3">
                  <img id="abc" src="images/abc.jpg" alt="logo" />
               </div>
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed my-nav-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                  </button>
               </div>
               <div class="col-lg-9" >
                  <font style="font-family: Times New Roman" size="20" color="white" id="headline">hello</font><br>
                  <div id="bs-example-navbar-collapse-1">
                     <a href="#btn1" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button1</b></font></a>
                     <a href="#btn2" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button2</b></font></a>
                     <a href="#btn3" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button3</b></font></a>
                     <a href="#btn4" class="btn btn-info navbar-btn navbar-bottom" id=""><font color="white"><b>button5</b></font></a></div>
                     <div class="btn-group">
                        <!--<marquee width="1000px"><a href=""><font color="white"><h3>XYZ</h3></font></a></marquee>-->
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

＆＃13;

bootstrap 3：jumbotron中的文本对齐方式

1 个答案: