Question

我已将引导程序面板添加到某些移动响应中＆lt; ul ＆gt; ＆LT;的利＆GT;部分它的浮动右侧部分不能移动到右侧如何修复它，看这个图像issue

我需要稍微削减一些余量，请帮我解决感谢。

.panel-invoice ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.panel-invoice li {
  float: left;
  color: #7c828b;
  padding: 0 10px;
  font-size: 11px;
  font-weight: bold;
}

.panel-invoice li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.panel-pro .panel-body {
  padding: 9px;
  height: 66px;
}

.panel-pro .panel-heading {
  padding: 9px 10px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 17px;
}

.panel-amount {
  margin-left: 45px;
}

.panel-lines {
  border-top: 1px dotted #dad6d6;
  margin-top: 7px;
}

.panel-total-amounts .height {
  color: #b89981;
}

.panel-marks {
  color: black;
}

<div class="button-detils-profile">
  <div class="container">
    <div class="panel-pro">
      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">Mahesh H


          </div>
          <div class="panel-body">
            <div class="panel-invoice">
              <ul>
                <li>Total bill
                </li>

                <li class="panel-right-side panel-amount" style="float:right;">$ 750.00
                </li>
              </ul>
            </div>
            <div class="panel-invoice">
              <ul>
                <li>Advance payments

                </li>

                <li style="float:right">$ 00.00
                </li>
              </ul>
              <div class="panel-lines">

              </div>
              <ul>
                <li><span class="panel-marks">Balance payments</span>


                </li>

                <li class="panel-total-amounts" style="float:right"><span class="height">$ 750.00</span>

                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>

    </div>



  </div>
</div>

Answer 1

对于你的问题，你不需要编写任何css代码，所有样式都可以在bootstrap本身上使用，更好地学习bootstarp。请阅读此处的文档 - ＆gt; bootstrap- documentation

以下是JSFiddle answer for your problem

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- begin snippet: js hide: false console: true babel: false -->

e引导面板ul li元素无法在移动响应中对齐

1 个答案: