文章/答案/技术大牛

发布

问Bootstrap弹出窗口3列
EN

Stack Overflow用户

提问于 2015-04-16 00:37:10

回答 2查看 1.3K关注 0票数 1

我试着用bootstrap做一个弹出窗口。我修改了模板中的一些代码。它应该有3列。第一列图片，第二列文本和第三列是价格和button+icon。这将是一个包含几个相似行的列表。为了简单起见，我在这里只放了一行。页脚将是一些文本。问题是我不能把第三列放到正确的位置。我尝试了clearfix等，有什么建议吗？

请注意，这些代码有几个未解决的问题。请忽略这些东西。这不是第一要务。提前Tks。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<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 type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">

                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div "col-lg-3 col-md-4 col-xs-4 clearfix">
                
                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>
                
            </div>
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>
                      
                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

twitter-bootstrap

html

css

回答 2

Stack Overflow用户

发布于 2015-04-16 00:51:43

你必须添加一个‘行’，并忘记了一个'class=‘，你可以删除清除

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<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 type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wish List</h4>

            </div>
            <div class="modal-body">
<div class="row">
                <div class="col-lg-3 col-md-4 col-xs-4 ">
                    <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix">
                
                    <p ><a href="#">Product Title</a></p>
                    <p class="text-warning"><small>Description.dfdasf jsadfdasld fdslafjlsadf sldfjsdljf</small></p>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-4 clearfix" >
                    <p>price$6.99</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
                     <span class="glyphicon glyphicon-trash"></span>
                </div>
                
            </div>
         </div>     
            <div class="modal-footer">
                <span> view of 1-5 of </span>
                <select>
                      <option value="5">5</option>
                      <option value="5">10</option>
                      
                </select>
            </div>
        </div>
    </div>
</div>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2015-04-16 00:51:37

它主要是下面的第一个，但这里还有一些其他需要考虑的事情：

You在第二列的标记中遗漏了关键字class ，这是非常好的clearfix类，并不需要这个类。如果你把所有的东西包装在一个row目录中，那么它会很好地为你做换行。
列应该总是加起来是12 -当你有三个col-lg-3时，你最终会得到一些左对齐的东西，并且只占模式的四分之三。
较小屏幕尺寸的列将被提升到下一个，所以col-xs-4 col-sm-4 col-md-4 col-lg-3等同于说col-xs-4 col-lg-3。对于相同的结果，需要应用的CSS规则越少越好。
在您的示例中，描述中有一个非常长的单词，这会导致它溢出到下一列。您可能希望通过尝试像word-wrap和text-overflow.

这样的东西来说明这种情况

    $(document).ready(function() {
      $("#myModal").modal('show');
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Modals</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <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>
</head>

<body>
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Wish List</h4>

        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-4">
              <a class="thumbnail" href="http://www.picturesnew.com/media/images/car-image.jpg" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="something" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
              </a>
            </div>
            <div class="col-xs-4">
              <p><a href="#">Product Title</a>
              </p>
              <p class="text-warning"><small>Description.dfdasfjsadfdasldfdslafjlsadfsldfjsdljf</small>
              </p>
            </div>
            <div class="col-xs-4">
              <p>price$6.99</p>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Buy now</button>
              <span class="glyphicon glyphicon-trash"></span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <span> view of 1-5 of </span>
          <select>
            <option value="5">5</option>
            <option value="5">10</option>

          </select>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29655931

复制

相似问题

问Bootstrap弹出窗口3列
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap弹出窗口3列EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap弹出窗口3列
EN