根据按钮行宽

时间：2017-04-05 03:27:59

标签： html css twitter-bootstrap

我在div中有一些按钮，它们很多，形成新行，所以我在div中做了一个垂直滚动，可以访问所有这些按钮。

问题是垂直滚动不在按钮的旁边，这就是我需要的，但是很难，因为一排按钮的宽度总是会根据屏幕的宽度而变化。

在snipet中，如果你更改屏幕宽度，你可以看到按钮和滚动之间有很大的可变空间，我已经将颜色添加到主div中以便更好地区分：

body{
	overflow-y: hidden;
}

#sentlist{
	height: 55px;
	overflow-y: auto;
}

#sli{
	width:auto;
	background-color: #EEAAEE;
}

.otradiv{
	height:50px;
	background-color:orange;
}

button{
  width:50px;
  height:23px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="test2.css">
</head>
<body>
<div id="footer">
  <div class="navbar navbar-inner navbar-fixed-bottom">
    <div class="row">
      <div id="sentlist" class="col-xs-10 col-sm-10 col-md-10 col-lg-11">
        <div id="sli">
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
        </div>
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1">
        <div class="row otradiv">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

所以，无论屏幕的宽度如何，有没有办法消除按钮和滚动之间的空间？

修改： 这里的snipets无法调整大小，here's一个codepen：

2 个答案:

答案 0 :(得分：1)

您可以使用flex 

 #sli .flex-container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

＆＃13;
＆＃13; 
.flex-container {
display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.flex-container .item {
    width: 50px;
    height: 23px;
    background: red;
    margin: 0px 1.1% 8px;
}
.flex-dummy {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.flex-container .item>button {
    width: 100%;
    height: 100%;
}
.otradiv {
    height: 50px;
    background-color: orange;
}
#sentlist {
    height: 55px;
    overflow-y: auto;
}
#sli {
    width: auto;
    background-color: #EEAAEE;
}
＆＃13; 
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="footer">
  <div class="navbar navbar-inner navbar-fixed-bottom">
    <div class="row">
      <div id="sentlist" class="col-xs-10 col-sm-10 col-md-10 col-lg-11">
        <div id="sli">
			<div class="flex-container">
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
						<div class="item"><button></button></div>
				
				<!-- add fill dummys here. The number of dummys must be the number of possible columns minus one -->
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				<div class="item flex-dummy"></div>
				
			</div>
        </div>
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1">
        <div class="row otradiv">
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

div＃sentlist上有不需要的填充，它在div＃sli和滚动条之间创建了空格。您需要从div＃sentlist中删除填充。

  #sentlist{
    height: 55px;
    overflow-y: auto;
    padding: 0; //remove bootstrap padding
  }

此外，通常最佳做法是在css文件中使用类而不是id。

相关问题
最新问题