Question

我正在尝试使用下面的图片创建HTML / CSS [！[在此处输入图片描述] [1]] [1]

我在创建带有白色框的银色“添加开瓶器”框，然后在其中的另一个银色框时遇到麻烦。有什么想法可以做到吗？

这是我的下面代码，但看起来与上图不一样：

{% extends 'bootstrap/base.html' %}

{% block content %}
    <div class="container">
        <div class="row row-content">
          <div class="col-xs-12 col-sm-6 text-right">

          <div class="row">
              <h2><font color="black">CorkBoard</font></h2>

          </div>

        </div>

        <div class="row row-content">
            <div class="col-xs-12 col-sm-6">
              <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                <!-- Email -->
                <div class="form-group">
                  <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                  </div>
                </div>

                <div class="dropdown">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#" data-value="action">Home & Garden</a></li>
                    <li><a href="#" data-value="another action">Education</a></li>
                    <li><a href="#" data-value="something else here">People</a></li>
                    <li><a href="#" data-value="separated link">Separated link</a></li>
                  </ul>
                </div>

              </form>
            </div>
        </div>
    </div>
{% endblock %}





    </body>
</html>

Answer 1

行只能包含列，但是您具有以下内容：

<div class="row">
    <h2><font color="black">CorkBoard</font></h2>
        </div>

您需要在该行中添加一列，就像在此之后所做的一样：

<div class="row row-content">
    <div class="col-xs-12 col-sm-6">

您还需要将下拉类也包装在行和列中。

Answer 2

这可能有助于您前进。强烈建议将内联样式转移到自己的类上，而不管样本如何。

这不是我的首选方式，这主要是引导方式。我确实在所有容器上都将容器更改为容器流体，似乎也解决了我注意到的另一个问题

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="container-fluid" style="background-color:silver">
    <div>
      <h6>Add CorkBoard</h6>
    </div>
    <div class="container-fluid" style="background-color:white">
      <div class="row row-content">
        <div class="col-xs-12">
          <br />
          <div class="container-fluid" style="background-color:silver">
            <div class="row row-content">
              <div class="col-xs-12 col-sm-6 text-right">

                <div class="row row-content">
                  <div class="col-xs-12 col-sm-6">
                    <h2>
                      <font color="black">CorkBoard</font>
                    </h2>
                  </div>
                </div>

              </div>

              <div class="row row-content" style="padding:15px">
                <div class="col-xs-12 col-sm-6">
                  <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                    <!-- Email -->
                    <div class="form-group">
                      <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                      </div>
                    </div>

                    <div class="dropdown">
                      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#" data-value="action">Home & Garden</a></li>
                        <li><a href="#" data-value="another action">Education</a></li>
                        <li><a href="#" data-value="something else here">People</a></li>
                        <li><a href="#" data-value="separated link">Separated link</a></li>
                      </ul>
                    </div>

                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row row-content">
        <p></p>
      </div>
    </div>
    <div class="row row-content">
      <p></p>
    </div>
  </div>
</body>

</html>

但是，通过使用一些自定义CSS，您可以实现一些更好的东西，并根据自己的喜好对其进行改进和/或更改。

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css" media="all">
    .box {
      background-color: silver;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    
    .boxinabox {
      background-color: white;
      width: 100%;
      padding: 2.5%;
    }
  </style>

</head>

<body>
  <div class="container-fluid box">
    <h6>Add CorkBoard</h6>
    <div class="boxinabox">
      <div class="container-fluid" style="background-color:silver">
        <div class="row row-content">
          <div class="col-xs-12 col-sm-6 text-right">

            <div class="row row-content">
              <div class="col-xs-12 col-sm-6">
                <h2>
                  <font color="black">CorkBoard</font>
                </h2>
              </div>
            </div>

          </div>

          <div class="row row-content" style="padding:15px">
            <div class="col-xs-12 col-sm-6">
              <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                <!-- Email -->
                <div class="form-group">
                  <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                  </div>
                </div>

                <div class="dropdown">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#" data-value="action">Home & Garden</a></li>
                    <li><a href="#" data-value="another action">Education</a></li>
                    <li><a href="#" data-value="something else here">People</a></li>
                    <li><a href="#" data-value="separated link">Separated link</a></li>
                  </ul>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

我不确定这是否是您要问的问题，对不起，如果我走题了。请告诉我是否这样做。

在框内创建引导HTML / CSS框

2 个答案: