html - Bootstrap 3 : Text alignment in jumbotron

Question

我在 bootstrap 3 中开发了一个网页。在电脑屏幕上一切看起来都很完美。但是在移动屏幕上，超大屏幕中的文本会出现，因为它会出现一个水平滚动条。

<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 修复是崩溃类的细节“javascript 不能在片段中工作在你的文件中尝试它”

.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

<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>

或者只是删除 navbar-collapse 折叠类

<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>