结果仍然不起作用？请帮助

Question

我希望在容器中将多个按钮设置为相等的宽度。我也希望在横向模式或更宽的屏幕上调整按钮的大小。我该如何实现？

我要实现的目标如下

但是当我将其切换回Potrait时会得到什么

中

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

   .card{
        border:0px solid;
        position:relative;
        height:200px;
        background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
        background-size:cover;
    }

    .card img {
      width:100%;
    }

    .search-box {
      position : absolute;
      display:inline-block;
      bottom:-30px;
      left:0;
      right:0;
      padding:15px;
      text-align:center;
    }

    .drop-shadow {
        -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
        box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
        border-radius:0px;
    }
    .container-fluid{
        width:auto
    }
    .container-fluid.drop-shadow {
        margin-top:2%;
        margin-left:5%;
        margin-right:5%

    }

    #child{
            width:100%;
            height: 20px;
            margin: auto;
            text-align: center;
            margin-top: 40px;
    }
    .form-group {
      width:100%;
      margin-bottom:10px;
    }
    .btn-checkin{
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        color: #fff;
        border-color: #EC008c;
        text-transform: uppercase;
        background-color: #EC008c;
        font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
        padding: 0.375rem .75rem;
        font-size: 13px;
        border-radius: .25rem;
    }

    .icon-addon {
      position:relative;
    }
    .icon-addon label {
        position: absolute;
        left: 2px;
        top: 2px;
        padding: 8px;
        font-size: 20px;
    }
    .icon-addon input {
        height:40px;
        padding-left:35px;
    }
    .currentposition{
        position: -webkit-sticky;
        position: sticky;
        right:20px
    }

    .wrap {
        width: 100%;
        height: 50px;
        padding-top: 10px;
        padding-bottom:10px;
        text-align: center;
    }
    button{
        margin-left: 15px;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        color: #000000;
        border-color: #B9E5fB;
        text-transform: uppercase;
        background-color: #B9E5fB;
        font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
        padding: 10px 10px;
        font-size: 13px;
        border-radius: 10px;
        width:20%;
    }
     button:first-child{
        margin-left: 0;
    } 

  <body id="page-top" style="font-family:Arial">

 <div class="card" >
    <div class="search-box">
        <div class="form-group">
            <div class="icon-addon addon-lg">
                <input type="text" placeholder="Search classes" class="form-control" id="searchBar">
                <label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
            </div>
        </div>
        <button class="btn-checkin" style="font-family:Arial">Check in</button>
    </div>
</div>
<div id="child">
    <div class="container-fluid">
        <img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
        <p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
    </div>
    <div class="container-fluid drop-shadow">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
            </a>
          </div>
          <div class="media-body">
            <h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
            <p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
          </div>
        </div>
    </div>
    <div class="container-fluid drop-shadow" style="margin-top:20px">
        <div class="container">
            <p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
        </div>
        <div class="wrap"> 
            <button>All</button>
            <button >Morning</button>
            <button >Afternoon</button>
        </div>
        <div class="wrap"> 
            <button>Evening</button>  
            <button>Tomorrow</button>
            <button>This Week</button>
        </div>
    </div>
</div> 


</body>

结果仍然不起作用？请帮助

Answer 1

您可以使用引导网格来实现您的目标。将您的按钮包裹在引导程序列中，如下所示。这将创建宽度相等的列，并且您的按钮位于每列内。

<div class="row">
  <div class="col"> <button class="mybtn"> All </button> </div>
  <div class="col"> <button class="mybtn">Morning</button> </div>
  <div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>

您可以通过提供空白来增加按钮之间的间距：

.mybtn
{
  margin:0 5px;
}

了解更多Here

Answer 2

将col-md-4用于中等大小的设备，将col-sm-4用于小型设备，将col-xs-4用于超小型设备。

尝试此链接。

http://jsfiddle.net/my5hdu6k/7/

Answer 3

要按所需方式设置按钮，您需要在任何屏幕尺寸中限制其宽度不超过总宽度的33.33％。为此，您需要使用父级row div并包装每个按钮在col div内，如下代码所示。

<div class="wrap"> 
  <div class="row">
  <div class="col">
    <button>Button 1</button>  
  </div>    
  <div class="col">
    <button>Button 2</button>
  </div>
  <div class="col"> 
    <button>Button 3</button>
  </div>    
</div>

然后，您必须将文本欺骗为省略号，以保护较小的屏幕上超出的文本（对于您的本例来说可能不是必需的，但为最坏的情况做计划是一种很好的做法）。仔细查看我对CSS中的.button类所做的更改。

.wrap {
    width: 250px;
    height: 50px;
    padding: 25px;
    text-align: center;
    display: inline-block;
    width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;}  /* Customized the .row class of bootstrap */
button{
    margin:5px 0; /* to undo your older style */
    width:100%;
    text-overflow: ellipsis;    
    white-space:nowrap;
    overflow:hidden;
}
 button:first-child{
    margin:5px 0;  /* to undo your older style */
}

请检查提供的jsfiddle

CSS Bootstrap设置横向和纵向的按钮宽度

结果仍然不起作用？请帮助

3 个答案: