Question

我使用bootstrap制作了一个标题原型。问题是我无法理解为什么我的右侧有这么大的填充物。如果我在Корзин之后再添加一个字母，HTML会给我一个新行。我怎么能摆脱这个自由空间？这是图像 {{3}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
   <!-- Navigation -->
    <!-- Heading beginning -->
    <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
          <div class="col-md-8">
            <input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
        <button type="button">Search</button>
        <span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
        <span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
          </div>
          <div class="col-md-8">
            <small>Например, лекарства для диабетиков</small>
          </div>
        </div>
        <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
      </div>  
    </div>
    <!-- Heading end-->
  </body>

Answer 1

您需要将col-md-8增加到col-md-10并将元素向右浮动以从右侧移除空白区域。

这是更新后的demo

为什么我使用Twitter Bootstrap获取太多像素填充？

1 个答案: