小编Gan*_*tta的帖子

使用css的弯曲的盒子

我试图设计如下图像,仍然没有得到结果,请帮助我.任何帮助,将不胜感激

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
    border-radius: 10px 90px 90px 10px / 8% 100% 100% 8%;
    background: #18b1a0;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners!</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

css html5 jquery-ui css3

Gan*_*tta

2017 10-18

6
推荐指数

1
解决办法

1158
查看次数

图像到bootstrap中div的中心

无论大小如何,所有图像都应居中对齐.我试过下面的代码,但它对我不起作用.任何帮助,将不胜感激

.border-class{
  border:1px solid #ddd;
  padding:5px;
  min-height:160px;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
 <div class="col-xs-3"> 
   <div class="border-class">
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
     </div>
</div>
<div class="col-xs-3">   
  <div class="border-class">
  <img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/> 
    </div>
</div>
<div class="col-xs-3">   
  <div class="border-class">
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
    </div>
</div>
<div class="col-xs-3"> 
  <div class="border-class">
  <img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/> 
    </div>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

Gan*_*tta

2016 12-28

1
推荐指数

1
解决办法

748
查看次数

使用 Bootstrap 设计递增和递减数字

我正在尝试获取如下所示的用户界面，并且需要在数字下方有一个边框，如图所示：

但我使用下面所示的代码得到了不同的结果。有人可以帮我设计这个吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .input-number{
  margin: 0 15px;
width: 50px !important;
}
  </style>
</head>
<body>
<div style="width:150px;padding:50px;">
<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
      <span class="glyphicon glyphicon-minus"></span>
    </button>
  </span>
  <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
  </span>
  </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

css jquery responsive-design twitter-bootstrap

Gan*_*tta

2018 02-16

0
推荐指数

1
解决办法

2万
查看次数