Question

这是我简化的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">

<div class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a href="/index">Home</a></li>
        <li><a href="/search">Search</a></li>
        <li><a href="/logout">Log out</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" >
      <div class="row">
        <div class="col-md-6" >
          <p><h4>Top Left</h4>
        </div>
        <div class="col-md-6" >
          <p><h4>Top Right</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" >
          <p><h4>Bottom Left</h4>
        </div>
        <div class="col-md-6" >
          <p><h4>Bottom Right</h4>
        </div>
      </div>
    </div>
  </div>
</div>

以下是我希望在浏览器中看到的内容：

Home     Search      Log out

Top Left           Top Right

Bottom Left        Bottom Right

以下是我在Firefox和Chrome中看到的内容：

Home     Search      Log out

p Left           
p Right

tom Left        
tom Right

为什么？

Answer 1

这是因为您正在为中型屏幕定义尺寸并在小屏幕或超小屏幕上进行测试。您需要明确指定它们的大小。为小屏幕添加col-sm-*，为额外的小屏幕添加col-xs-*。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">

<div class="container">
  <nav class="navbar navbar-default">
  <div class="container-fluid">
   
    <ul class="nav navbar-nav col-md-12">
        <li class=" col-md-4 col-xs-4 "><a href="/index">Home</a></li>
        <li class=" col-md-4 col-xs-4 "><a href="/search">Search</a></li>
        <li class="  col-md-4 col-xs-4"><a href="/logout">Log out</a></li>
      </ul>
    </div>
  </nav>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6" >
          <p><h4>Top Left</h4>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6" >
          <p><h4>Top Right</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6" >
          <p><h4>Bottom Left</h4>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6" >
          <p><h4>Bottom Right</h4>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap - 为什么文本从浏览器窗口左边缘开始一英寸？

1 个答案: