那些遇到过的问题

小编cku*_*jer的帖子

基于x高度的垂直对齐

当试图将内容集中在一个容器中时,CSS-Tricks有一个很好的指南.然而,当试图垂直居中一些略小于其容器的文本时,我认为垂直居中文本的另一种方式可能更可取.而不是使用字体的整个高度,我宁愿基于字体的x高度(基本上是小写x的高度)居中它

x高度的视觉解释

请参阅此示例,其中红色基于整个高度,绿色基于x高度

垂直居中之间的差异

我能想到的唯一选择是在文本中添加一个与容器高度相同的伪元素,并使用vertical-align:middle.

.pseudo {
  white-space: nowrap;
}

.pseudo:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100px;
  width: 0;
}
Run Code Online (Sandbox Code Playgroud)

这可行,但不幸的是只有一行.我想知道是否有其他人试图解决这个问题,是否有最好的做法可以遵循？我特别感兴趣的是使用尽可能少的"魔术"数字,如果有多线变体的解决方案.

有关我为什么要根据x高度和我的解决方案将其居中的示例,请参阅Codepen.

css

cku*_*jer
2014 09-27
18
推荐指数
1
解决办法
5678
查看次数

Bootstrap列之间的垂直间隙

我正在尝试在Bootstrap中创建一个布局,在较大的屏幕上显示三个块,在较小的屏幕上显示两个块(断点出现在sm和md之间).

想要布局

<div class="row">
    <div class="container">
        <div class="col-xs-6 col-md-4">A - 50</div>
        <div class="col-xs-6 col-md-4">B - 100</div>
        <div class="col-xs-6 col-md-4">C - 75</div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

请参阅CodePen示例

然而,这导致块A和C之间的不希望的垂直间隙.

多余的布局

在我看来,我有一些可能的选择来消除垂直间隙,但也许有一个更好的解决方案:

  • 复制html并使用visible-sm和visible-md来显示所需的布局.在sm上,它将具有两列布局,第一列包含A和C.
    • 缺点:块内容也需要重复,可能包含很多html
  • 使用JavaScript将块移动到正确的列(也许是jQuery Masonry).
    • 缺点:我宁愿只有CSS解决方案
  • 看一下flexbox,css列和css网格.
    • 缺点:浏览器支持不存在

css positioning css3 responsive-design twitter-bootstrap

cku*_*jer
2014 07-08
9
推荐指数
1
解决办法
2621
查看次数

Bootstrap select destroy从DOM中删除原始选择

我目前在我的一个项目中使用Bootstrap select插件.我有一个动态生成的表,其中包含select元素,然后我使用以下命令将其转换为bootstrap select:

_tr.find('select.selectpicker').selectpicker({ size: 10 });
Run Code Online (Sandbox Code Playgroud)

哪里_tr是我添加选择元素的行.这工作正常,显示bootstrap选择,在firebug中我仍然看到原始的select元素.

现在每行都有一个按钮,用于删除(销毁)引导程序选择.但它也删除了原始选择,这就是问题因为我仍然需要原始选择来做其他事情.

我使用以下命令来销毁:

 $('select#begin' + _week + _day).selectpicker("destroy");
 $('select#end' + _week + _day).selectpicker("destroy");
 $('select#pause' + _week + _day).selectpicker("destroy");
Run Code Online (Sandbox Code Playgroud)

在其他插件中,如果使用destroy,它会再次显示原始元素.这是boostrap选择插件中的问题还是有另一种方法可以删除引导程序选择并重新显示原始选择.

jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-select

Miv*_*web
2014 12-07
6
推荐指数
1
解决办法
5256
查看次数

左侧固定侧边栏菜单和顶部固定标题

所以我想要做的是一个固定的侧边栏，顶部有一个固定的菜单，中间的内容可以滚动。

body,
html {
  height: 100%;
  margin: 0;
}
aside {
  background: #90EE90;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 120px;
}
ul {
  list-style: none;
}
section {
  background: #ADD8E6;
  height: 100%;
  margin-top: 60px;
}
header {
  background: #FF0;
  height: 60px;
  left: 0;
  margin-left: 120px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 99;
}
.container {
  left: 0;
  margin-left: 120px;
  min-height: 100%;
  position: relative;
  text-align: center;
}
figure {
  margin: 0;
}
img {
  height: …
Run Code Online (Sandbox Code Playgroud)

html css header sidebar fixed

Ped*_*dro
2014 12-06
4
推荐指数
1
解决办法
1万
查看次数

如何防止bootstrap 3(3.3.1)navbar-form进入移动界面的单独行

我使用的固定导航栏在桌面浏览器上工作正常,但当导航栏崩溃时,搜索分为两行(http://www.employees.org/~vivek/how_it_looks.png).我如何确保搜索表单.菜单崩溃后仍保持在顶部 - 类似于yelp移动界面(http://www.employees.org/~vivek/yelp_look.png)

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Brand</a>
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" …
Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap twitter-bootstrap-3

Viv*_*mar
2014 12-22
4
推荐指数
1
解决办法
1847
查看次数

如何配置无服务器S3存储桶资源以将CORS AllowOrigin设置为其功能的http端点

我正在使用Serverless来创建一个Web应用程序,该应用程序从S3存储桶提供静态内容,例如Web字体.S3存储桶配置为serverless.yml文件中的资源.其CORS配置将AllowOrigin设置为通配符.

我想将此更改为具有AllowOrigin,其中包含由Serverless创建的服务的http端点,例如31alib51b6.execute-api.eu-west-1.amazonaws.com.

我想知道是否可以在serverless.yml文件中配置它.

我的示例serverless.yml文件:

service: example-service

provider:
  name: aws
  runtime: nodejs4.3
  region: eu-west-1

functions:
  web:
    handler: handler.handler
    name: ${self:service}-${self:provider.stage}
    description: ${self:service} web application - ${self:provider.stage}
    events:
      - http:
        path: web
        method: get
      - http:
        path: web/{proxy+}
        method: get

resources:
  Resources:
    S3Assets:
      Type: AWS::S3::Bucket
      Properties: 
        BucketName: ${self:service}-${self:provider.stage}-assets
        CorsConfiguration:
          CorsRules:
            - AllowedMethods:
                - GET
                - HEAD
              AllowedOrigins:
                - "*"
Run Code Online (Sandbox Code Playgroud)

amazon-web-services aws-cloudformation aws-lambda serverless-framework

cku*_*jer
lucky-day
4
推荐指数
1
解决办法
2865
查看次数

是什么导致border-radius不起作用？

我已经在Chrome和Firefox中对此进行了测试.我试图在我的桌子上做一些略微圆润的边缘,我不明白为什么border-radius命令不起作用.

这是jfiddle:

http://jsfiddle.net/hz018pLz/

当我CTRL+SHIFT+I用来查看计算出的样式时,我看到这个元素有

border-radius: 20px; 勾选,但取消选择它不会改变表格的显示.

为了让这个工作,我需要做什么？

这是代码:

#bp-table {
  font-family: Century Gothic, sans-serif;
  font-size: 11px;
  margin: 15px;
  width: 99%;
  max-width: 99%;
  border-radius: 20px;
  border-collapse: collapse;
}
#bp-table th {
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  padding: 8px;
  background: rgb(60, 55, 88);
  color: #ffffff;
}
#bp-table td {
  padding: 8px;
  background: #e8edff;
  text-align: left;
  border-bottom: 1px solid #fff;
  border-top: 1px solid transparent;
}
#bp-table tr:hover td {
  background: #f0d3d3;
  color: #1e1e5b;
}
Run Code Online (Sandbox Code Playgroud) 
<table id="bp-table">
  <thead> …
Run Code Online (Sandbox Code Playgroud)

html css

Bri*_*ell
2014 12-06
3
推荐指数
1
解决办法
122
查看次数

在tabpane里面排

当我在选项卡窗格中添加一行时,该行的内容似乎具有穿过选项卡窗格边缘的边界的负边距.

如何在选项卡窗格中添加行(和列)？

下面是我的HTML:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<h3>Profil/Virksomhedsdata</h3>
<nav class="navbar navbar-default" role="navigation">
  <ul class="nav nav-tabs" id="myTab">
    <li role="presentation" class="active"><a href="#profil" data-toggle="tab">Profil</a>
    </li>
    <li role="presentation"><a href="#autoristation" data-toggle="tab">Autoristationsområder</a> 
    </li>
    <li role="presentation"><a href="#abonnement" data-toggle="tab">Abonnement</a>
    </li>
  </ul>
  <div id="myTabContent" class="tab-content" style="padding-left:5px;padding-top:5px;">
    <div class="tab-pane fade in active" id="profil">
      <form role="form" class="form-horizontal">
        <div class="row">
          <div class="form-group">
            <label class="control-label col-sm-1" for="email">Email:</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
          </div>
          <div class="form-group">
            <label for="pwd" class="control-label col-sm-1">Password:</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
          </div> …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

DTH*_*DTH
2014 12-23
3
推荐指数
1
解决办法
3271
查看次数

Bootstrap 菜单没有下推内容

请原谅我的无知，我是新手。我有这段代码需要更正，但我不明白为什么菜单没有在点击时将其余内容向下推。这是 HTML 和 CSS 代码片段

*:before,
   *:after {
     box-sizing: border-box;
   }
   .navbar-default .navbar-toggle {
     border-color: #ddd;
   }
   .navbar-toggle {
     background-color: transparent;
     background-image: none;
     border: 1px solid transparent;
     border-radius: 4px;
     float: right;
     margin-bottom: 8px;
     margin-right: 15px;
     margin-top: 8px;
     padding: 9px 10px;
     position: relative;
   }
Run Code Online (Sandbox Code Playgroud) 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <nav role="navigation" class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true"> …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Muh*_*ham
2014 12-25
2
推荐指数
1
解决办法
7115
查看次数

featherlight.js背景&关闭按钮css？

我想使用一个简单的js来停用和激活html的溢出,"body"如下所示:

$('.my_link').click(function(){
    $('body').css('overflow-y', 'hidden');
});

$('.featherlight_background & featherlight_close_button').click(function(){
    $('body').css('overflow-y', 'scroll');
});
Run Code Online (Sandbox Code Playgroud)

但我没有找到"featherlight_background"和"featherlight_close_button"的css名称 - ".".featherlight:last-of-type"和".featherlight-close-icon"不起作用;(.

这是我使用的脚本:featherlight

有谁能够帮我？

javascript css featherlight.js

Pep*_*epe
2014 12-28
1
推荐指数
1
解决办法
3665
查看次数

Bootstrap文本字段按钮添加标签

我有以下引导代码用于显示带按钮的文本字段:

 <div class="form-group">
   <div class="input-group">
      <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
      </span>
      <label>Second Column</label>
      <input type="text" class="form-control" placeholder="Search for...">
   </div>
   <!-- /input-group -->
</div>
Run Code Online (Sandbox Code Playgroud)

我应该得到这样的东西:

在此输入图像描述

但我得到的是:

在此输入图像描述

我猜它是因为<label>标签.

关于如何解决这个问题的任何线索？

css css3 twitter-bootstrap twitter-bootstrap-3

VAA*_*AAA
2015 02-03
1
推荐指数
1
解决办法
1119
查看次数

C模数,输出错误

我的简单C程序中有一个非常烦人的问题,我不明白为什么这段代码不起作用.

这是代码:

#include <stdio.h>

   int main()
{

    unsigned long long podstawa,wykladnik;
    unsigned int d;


    scanf("%d",&d);
    while(d>0)
    {
        d--;
        scanf("%d %d",&podstawa,&wykladnik);

        printf("%d %d",(podstawa%10),(wykladnik%10) );

    }

    return 0;
}
Run Code Online (Sandbox Code Playgroud)

如果您编译此程序,即使输入数据是正确的,您也可以看到它.

Wykladnik%10 错误的号码.

例如,podstawa和的值wykladnik是3,而podstawa%10打印输出3的wykladnik%10打印输出5.

这个错误很有意思,因为值wykladnik%10总是比2应该大,我不知道为什么.

我希望我提供了足够的信息,有人能够帮助我.我一直试图找到这个错误10分钟,我仍然看不到它.

c

作者
2014 12-21
-1
推荐指数
1
解决办法
171
查看次数

标签 统计

css ×9

twitter-bootstrap ×6

html ×4

twitter-bootstrap-3 ×3

css3 ×2

amazon-web-services ×1

aws-cloudformation ×1

aws-lambda ×1

bootstrap-select ×1

c ×1

featherlight.js ×1

fixed ×1

header ×1

javascript ×1

jquery ×1

navbar ×1

positioning ×1

responsive-design ×1

serverless-framework ×1

sidebar ×1