Question

我正在使用Bootstrap，我知道如何让这些按钮并排显示，但却出现了实现我想要的问题。

当按钮在100％宽度的容器中并排时，一切都很好。但是，如果第二个按钮被删除，我希望第一个按钮填满100％。

是否只有CSS方法？

Answer 1

仅CSS解决方案是使用only-child伪选择器

* {
  box-sizing: border-box;
}
.container {
  width: 340px;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 5px;
}

.btn {
  margin: 0 5px 0 0;
  padding: 4px 8px;
  background: #5d4ca5;
  color: #fff;
  text-decoration: none;
  text-align: center;
  width:157px;
  display: inline;
}

.container .btn:only-child {
  width: 100%;
}

<div class="container">
  <button class="btn">Button One</button>
  <button class="btn">Button Two</button>
</div>
<div class="container">
    <button class="btn">Button One</button>
</div>

在此处查看工作小提琴 - http://jsfiddle.net/sjpx5c34/1/（删除第二个按钮，您的唯一按钮将具有100％的宽度。）

Answer 2

当按钮并排放在100％宽度的容器中时   很好。但是，如果其中一个按钮消失了，我想要   其他按钮填写100％。

是否只有CSS方法？

是。您可以使用flex-grow的CSS Flexbox属性轻松完成此操作。

来自MDN：

flex-grow CSS属性指定flex的flex增长因子项目。它指定了Flex容器内的空间量项目应该占用。

基本上，您可以告诉元素占用所有可用宽度。因此，如果有两个元素，它们将平等地共享空间。如果删除了一个元素，则另一个元素会扩展以填充宽度。

以下是完成这项工作所需的所有代码：

<强> HTML

<div id="container">
    <button type="button">Button 1</button>
    <button type="button">Button 2</button>
</div>

CSS （相关部分）

#container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 75px;
}

button {
   flex-grow: 1; /* this one line tells button to stretch across all available width */
}

DEMO（点击效果按钮）：http://jsfiddle.net/rjy6nvj2/1/

注意：所有主流浏览器都支持Flexbox except IE 8 & 9。

Answer 3

Trick名为display:table-cell：

div { width:300px; border:1px solid; display:table; }
div > span { display:table-cell; border:1px solid red; width:50%; }

<div>
  <span>First</span> 
  <span>Second</span>
</div>

<div>
  <span>First</span> 
</div>

Answer 4

Anthony Russo 你好。

以下代码将说明如何首先居中您需要居中的时间因为你有理由删除一个按钮在这个例子中，我设置了一个小样本jquery，当你将鼠标悬停在第二个按钮上时将其移除。

当鼠标悬停时，它还会将类centerthis添加到第一个按钮以使其居中。

希望这有助于您入门。

<强>更新
我看到你已经添加到你的帖子中，所以我对我的代码添加了一些小改动。

删除第二个按钮后，您还希望剩余的按钮宽度达到100％我的代码现在也为你做了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Remove button and center</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}       
.block {
  height: 200px;
  background-color: darkorange;
} 
.block3 {
  height: 40px;
  width:550px; 
  padding-top: 3px;  
  background-color: blueviolet;
}     
.centerthis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}
.remove-on-hover {
  display: none;
}
.change-width {
 width: 100%;
}     
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container col-lg-12 spacer"></div>
    
    
    
<div class="container col-lg-12 block">
    
    <div class="col-sm-6 block3 centerthis">
          <div class="col-xs-6 centerthis"  >
           <div type="text" id="firstbutton" class="col-xs-6 btn btn-warning">First Button</div>
       
           <div type="text" id="whenchanged" class="col-xs-6 btn btn-warning">Second Button</div>
        </div> 
    </div>
</div>
   
    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
<script>
jQuery(function () {
    var myMenu = $('#whenchanged');
    myMenu.mouseenter(function () {
 
        $('#firstbutton').addClass("centerthis change-width");
        $("#whenchanged").addClass("remove-on-hover");
    });
})    
    
</script>    
</body>
</html>

两个按钮并排，如果一个被删除，另一个填充100％宽度

4 个答案: