Question

我有一个带引导程序的简单页面，我想在较小的screend上创建一行或两行的网格，但我总是得到一些错误：使用show-grid选项参见截图1：

按钮的div和IsDescending的div不占用所有高度，因此布局看起来很难看。

没有show-grid，请参见截屏2：

缺少所有填充物，设计比以前更糟糕。

如果所有边距都正确且一切都很漂亮，我怎样才能实现their page之类的行为？

我现在的标记是：

<div class="row show-grid">
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Query</span>
            <input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
        </div>
    </div>
    <div class="col-sm-5">
        <div class="input-group">
            <span class="input-group-addon">Language</span>
            <select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
                <option disabled>Choose language</option>
            </select>
        </div>
    </div>
    <div class="col-sm-7">
        <div class="col-sm-8">
            <div class="input-group">
                <span class="input-group-addon">Sorting field</span>
                <select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
                    <option disabled>Choose sorting field</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                Is Descending: <input asp-for="IsDescending" />
            </div>
        </div>
    </div>
    <div class="col-sm-1">
        <button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
    </div>
</div>

Answer 1

Bootstrap规则：

交替使用行和列
行具有负边距以确保列尊重容器宽度。

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

始终在列上包含col-xs- * 这是为了防止浮动问题。如果你的列应该是12宽，不管怎么说都不要忽略col-xs-12

<div class="row">
  <div class="col-xs-12 col-md-6">
      Some stuff
  </div>
</div>

首先移动
从最小的屏幕尺寸开始。从xs＆lt; sm＆lt; md＆lt; lg，你应该都很好！

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      Some stuff
  </div>
</div>

小列用作较大的列
如果没有另外指定，sm列也可以用作md列。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
      This is the same
  </div>

  <div class="col-xs-12 col-sm-6">
      as this one
  </div>
</div>

最后： 不要设置行和列的样式！
随意添加类来修改它们，但不要以任何方式覆盖它们！

错误示例：

.row {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row">
  <div class="col-xs-12">
    This is a no-go!
  </div>
</div>

好榜样

.pink-bordered {
  border: 5px solid pink;
  margin: 0 10px;
}

<div class="row pink-bordered">
  <div class="col-xs-12">
    Totally fine
  </div>
</div>

Answer 2

连续，有12个cols，所以计算...... 并放入一个容器中。

测试这个

https://jsfiddle.net/marcDX/33v44bw0/

select 
mt.firstname,dt.date,count(indirect_id)
 from 
datestable dt
left join
maintable mt
on mt.date=dt.date
and mt.indirect_id='sick'
group by mt.firstname,dt.date
having count(indirect_id)>=14
order by dt.date

和CSS对小屏幕感到满意

    <div class="container">
  <div class="row show-grid">
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Query</span>
        <input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
      </div>
    </div>
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon">Language</span>
        <select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
          <option disabled>Choose language</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 one">
      <div class="input-group">
        <span class="input-group-addon">Sorting field</span>
        <select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
          <option disabled>Choose sorting field</option>
        </select>
      </div>
    </div>
    <div class="col-sm-5 one">
      <div class="input-group">
        Is Descending:
        <input asp-for="IsDescending" />
      </div>
    </div>
    <div class="col-sm-1 one">
      <button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
    </div>
  </div>

Answer 3

目前，您的结构存在一些问题，因此看起来像浏览Bootstrap的一些基础将帮助您转向更好看的设计。您应该在每行中添加最多12列的列。例如：

<div class="container">
    <div class="row">

        <div class="col-sm-6" style="background-color:gray;">
            <h3>Left Column</h3>
            <div class="row"><!-- Nested Row. Children columns add up to 12 -->
                <div class="col-sm-7" style="background-color:lightblue;">
                    This is 7/12 of the left side
                </div>
                <div class="col-sm-5" style="background-color:lightgreen;">
                    This is 5/12 of the left side
                </div>
            </div>
        </div>

        <div class="col-sm-6" style="background-color:orange;">
            <h3>Right Column</h3>
            <div class="row"><!-- Nested Row. Children columns add up to 12 -->
                <div class="col-sm-4" style="background-color:lightblue;">
                    This is 4/12 of the right side
                </div>
                <div class="col-sm-8" style="background-color:lightgreen;">
                    This is 8/12 of the right side
                </div>
            </div>
        </div>

    </div>
</div>

如果你想要进一步划分这些列的元素，你需要新的行，这些行的子节点也应该加起来为12（如果你想要向右空的空格，则小于12）。这可能看起来像这样：

.row { 
  margin-top: 10px;
  margin-bottom: 20px;
}

这是一个背景颜色的最后一个例子和一个可视化的截图：

/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}

#sliderFrame 
{
    width:920px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    box-shadow: 0 0 5px #BBB;
    border:1px solid #CCC;
    background-color:#FFF;
}

#slider, #slider .sliderInner {
    width:680px;height:306px;/* Must be the same size as the slider images */
    border-radius:0px;
}

#slider {
    background-color:white;
    float:left;
    position:relative;
    transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    cursor:pointer;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
    position:absolute;
    width:400px;
    height:auto;
    padding:10px 0;/* 10px will increase height.*/
    left:120px;
    bottom:10px;
    overflow:hidden;
    font:bold 13px/16px Arial;
    color:#069;
    text-align:center;
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
}
#slider .mc-caption a { 
    color:#060;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
    display:none;
}

/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/* -- thumbnails -- */
#thumbs 
{
    float:left;
    margin-left:10px;
    width:230px;
    font:normal 11px/13px Arial;
    border-top:1px solid #CCC;
    color:#666;
}
#thumbs .thumb 
{
    border:1px solid #CCC;
    border-top:1px solid #FFF;
    padding:11px 8px;
    background:#EEE;
    cursor:pointer;
}
#thumbs .thumb-on 
{
    background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}

希望这有助于您了解如何构建元素。另外，正如您所指出的那样，默认情况下行之间没有任何空格，因此您可以使用一些简单的css在行之间添加空格，例如

<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
        <div id="slider">
            <img src="img/3.jpg" alt="Caption for slide 1" />
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
            <a href="http://www.menucool.com"><img src="slide-3.jpg" alt="Header File" /></a>
            <img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
            <img src="img/3.jpg" alt="Caption for slide 4"/>
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
        </div>
    </div>

最后一个提示：当使用输入，复选框，选择等时，我总是查看Bootstrap文档here中使用的类和结构。如果不使用正确的类和DOM元素结构，事情看起来就不会很正确。 Bootstrap需要练习，祝你好运！

网格在引导程序

3 个答案:

Bootstrap规则：