Question

我正在尝试整理我的标题部分。我希望输入栏和按钮为col-md-8，而about和contact按钮为col-md-4。我希望输入栏比“提交反馈”按钮大得多，该按钮应该是关于col-md-2的。

这是我目前的代码。请实际编辑我的代码，然后发布新版本。这对我来说最容易实现和学习。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap For Beginners</title>
    <meta name="description" content="Hello World">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<style>

    .nav button {
        padding: 15px;
        font-size: 15px;
        margin: 10px;
    }

</style>

</head>

<body>
    <div class="nav">
        <div class="container-fluid">
            <form class="form-inline">
                <div class="form-group">
                    <div class="row">
                        <div class="col-lg-6">
                    <input type="text" class="form-control input-lg" id="exampleInputFeedback" placeholder="Have Feedback?">
                        </div>
                    </div>
                </div>

                    <button type="submit" class="btn btn-success">Submit Feedback</button>
                    <button type="link" class="navpill pull-right"><a href="#"></a>About</button>
                    <button type="link" class="navpill pull-right"><a href="#"></a>Contact</button>

            </form>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container-fluid">
            <div class="row">
                <h1>Student</h1>
                <h1>Business</h1>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container-fluid">
            <p>By:</p>
            <p>For:</p>
        </div>
    </div>

    <!-- Latest compiled and minified JavaScript -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body> 
</html>

这是Fiddle以显示我目前所写的内容。

Answer 1

在讨论input和button应该有多大时，你已经在谈论具体的Bootstrap的网格大小了，我认为你应该简单地将.row分成这些列，每列使用button。如果添加类.btn-block，它将占据列宽度的100％。

请参阅此示例（如果您希望我可以将其应用于您的代码）：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


<div class="container-fluid">
  <div class="row">
    <form>
      <div class="col-md-6">
        <input type="text" class="form-control input-lg" />
      </div>
      <div class="col-md-2">
        <button class="btn btn-success btn-block btn-lg">Submit</button>
      </div>
      <div class="col-md-2">
        <button class="btn btn-default btn-block btn-lg">Contact</button>
      </div>
      <div class="col-md-2">
        <button class="btn btn-default btn-block btn-lg">About</button>
      </div>
    </form>
  </div>
</div>

<强>更新

我已将其添加到下面的代码示例中（并删除了一些不需要的类，例如.form-inline）。祝你好好继续工作！

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<div class="nav">
  <div class="container-fluid">
    <form>
      <div class="form-group">


        <div class="col-md-6">
          <input type="text" class="form-control input-lg" id="exampleInputFeedback" placeholder="Have Feedback?">
        </div>
        <div class="col-md-2">
          <button class="btn btn-success btn-block btn-lg">Submit</button>
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-default btn-block btn-lg">Contact</a>
        </div>
        <div class="col-md-2">
          <a href="#" class="btn btn-default btn-block btn-lg">About</a>
        </div>

    </form>
    </div>
  </div>

  <div class="jumbotron">
    <div class="container-fluid">
      <div class="row">
        <h1>Student</h1>
        <h1>Business</h1>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="container-fluid">
      <p>By:</p>
      <p>For:</p>
    </div>
  </div>

  <!-- Latest compiled and minified JavaScript -->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

尝试将它包装在class = row周围，但仍然无法使输入表单栏更长

1 个答案: